updates on the ui changes and more things

src/App.jsx

@@ -86,8 +86,26 @@ const AuthenticatedApp = () => {
             <Route index element={<Navigate to="/doormile/home" replace />} />
 
             <Route path="home" element={<Home />} />
-            <Route path="dispatch" element={<Dispatch />} />
-            <Route path="dispatch/preview" element={<DispatchPreview />} />
+            {/* Control X — the board formerly routed at /doormile/dispatch.
+
+                The directory, the component and the .dispatch-container CSS
+                namespace keep their old names on purpose: they are internal,
+                and renaming a 5,800-line stylesheet's root class is a large
+                diff with no user-visible benefit and real risk of missing a
+                selector. Only what an operator sees and types changes. */}
+            <Route path="control-x" element={<Dispatch />} />
+            <Route path="control-x/preview" element={<DispatchPreview />} />
+
+            {/* The old paths keep working.
+
+                This board is the page operators sit on all day, so it is the
+                one most likely to be bookmarked, pinned in a browser tab
+                group, or pasted into a message. Renaming the route without
+                this would turn every one of those into a 404 — a support
+                problem with no upside, avoided by two lines. `replace` so the
+                dead path does not linger in history behind a Back press. */}
+            <Route path="dispatch" element={<Navigate to="/doormile/control-x" replace />} />
+            <Route path="dispatch/preview" element={<Navigate to="/doormile/control-x/preview" replace />} />
 
             {/* Static before dynamic, so `orders/create` cannot be read as an
                 order whose id is "create". */}