> For the complete documentation index, see [llms.txt](https://t420.gitbook.io/t420/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://t420.gitbook.io/t420/claude-desktop-layout-correction.md). # claude-desktop-layout-correction ## Claude Prompt — Desktop JobCard Layout Correction Paste this into a fresh Claude Code terminal session at the FleetOS repo root. *** You are working in the `ZBO19/FleetOS` repository. Read these first: 1. `docs/desktop-ui-review-current-state.md` 2. `docs/claude-hard-reset-coordination-spec.md` 3. Inspect the actual current code before making claims, especially: * `components/fleetos/components/JobCard.tsx` * `components/fleetos/components/dashboard/CustomSelect.tsx` ### Mission Fix the **desktop expanded JobCard layout** so it feels intentional, balanced, and premium. Do **not** start another generic polish pass. Do **not** redesign the product. Do **not** break mobile. This is a **desktop-specific layout correction** for the current expanded job card. *** ### Current problems to solve Assume these are true unless direct code inspection proves otherwise: 1. `Coordinator` and `Parts Dept` controls are too wide and visually dominate the card 2. `Bay` and `Tech` controls are also stretched too far across desktop 3. `Vehicle` and `Parts` controls now look too small and weak compared with Bay/Tech 4. the `Collapse` row still wastes vertical space and interrupts flow 5. the summary/header area is too left-heavy, with too much empty right-side space 6. the schedule block does not read as one disciplined desktop operator panel 7. the assignment section is visually louder than the actual execution dependencies *** ### Required outcome On desktop, the expanded JobCard should feel: * tighter * calmer * better balanced * more deliberate * easier to scan * less stretched The hierarchy should be: 1. summary / job context 2. execution dependencies (`Bay`, `Tech`, `Vehicle`, `Parts`) 3. secondary assignment context (`Coordinator`, `Parts Dept`) Not the other way around. *** ## What to change ### 1. Tighten assignment section on desktop For desktop only: * `Coordinator` and `Parts Dept` should not span edge-to-edge * make them compact and visually subordinate * use the same width language for both * keep alignment clean * preserve mobile behavior separately if needed #### Rule These are supporting controls, not the main visual focus. ### 2. Make the schedule block a real desktop grid For desktop only: * `Bay`, `Tech`, `Vehicle`, and `Parts` should feel like one aligned system * same left edge * same right edge where possible * same container-width logic where possible * same visual height language * `Vehicle` and `Parts` must not look like random tiny leftovers #### Important You do not have to make every control identical in behavior. You do need to make them feel like one designed panel. ### 3. Fix Collapse placement on desktop * reduce the dead band created by the current collapse row * consider moving `Collapse` up into the summary boundary or tightening its spacing significantly * avoid double-separator feeling * keep mobile clarity if a different treatment is needed on small screens ### 4. Rebalance summary/header composition on desktop * reduce the feeling that all meaningful information is jammed left while the right side is empty * either use the available width better or constrain the inner content width more intelligently * keep the urgency pill clean and intentional ### 5. Preserve product truth Do not remove coordination functionality. This is a layout/hierarchy correction, not a workflow rollback. *** ## Guardrails * Desktop-specific changes should not degrade mobile * No giant refactor unrelated to this issue * No new feature creep * No visual chaos * No edge-to-edge giant selects on desktop unless they are truly justified * Keep FleetOS visual language *** ## Required output style Your first response must contain exactly these sections: 1. `Desktop layout issues confirmed` 2. `Desktop layout strategy` 3. `Files I will change` 4. `What I will not change` Then implement. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://t420.gitbook.io/t420/claude-desktop-layout-correction.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.