Clean up spacing and other things in various parts of the UI#1972
Merged
DevonRD merged 18 commits intoPhotonVision:mainfrom Jul 12, 2025
Merged
Clean up spacing and other things in various parts of the UI#1972DevonRD merged 18 commits intoPhotonVision:mainfrom
DevonRD merged 18 commits intoPhotonVision:mainfrom
Conversation
Gold856
force-pushed
the
ui-clean-up
branch
2 times, most recently
from
4955bf9 to
60ae9d7
Compare
Gold856
force-pushed
the
ui-clean-up
branch
5 times, most recently
from
bd44745 to
fe446b6
Compare
Gold856
force-pushed
the
ui-clean-up
branch
4 times, most recently
from
94c6fc5 to
1125d1a
Compare
Gold856
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR refines UI spacing and layout across multiple views and components to achieve a more consistent, slightly more compact look after the Vue 3 upgrade.
- Reduced global padding on cards and dialogs (24px → 20px) and standardized internal element spacing to 20px.
- Removed dividers in dialogs, adjusted banner and table header assets, and preserved log view formatting.
- Cleaned up various component-specific layouts (camera matching, settings cards, dashboard tabs) and introduced reusable spacing utilities.
Reviewed Changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| photon-client/src/views/DashboardView.vue | Removed top padding on setup card text |
| photon-client/src/views/CameraMatchingView.vue | Added pr-0 on cols, standardized pt-3 for card text |
| photon-client/src/types/SettingTypes.ts | Added index to placeholder camera settings |
| photon-client/src/components/settings/ObjectDetectionCard.vue | Collapsed extra padding, streamlined table columns, added utilities |
| photon-client/src/components/settings/NetworkingCard.vue | Standardized card-title/text padding and divider spacing |
| photon-client/src/components/settings/MetricsCard.vue | Removed global padding, kept only vertical padding on sections |
| photon-client/src/components/settings/LEDControlCard.vue | Wrapped slider in card-text, adjusted title padding |
| photon-client/src/components/settings/DeviceControlCard.vue | Unified dialog and section paddings, removed inline row layouts |
| photon-client/src/components/settings/ApriltagControlCard.vue | Simplified card title/text padding |
| photon-client/src/components/dashboard/tabs/TargetsTab.vue | Updated area unit label, adjusted cell and header padding |
| photon-client/src/components/dashboard/tabs/OutputTab.vue | Wrapped table rows in <thead>/<tbody> |
| photon-client/src/components/dashboard/ConfigOptions.vue | Tweaked card padding from pr-4 pl-4 to pr-5 pl-5 and section spacing |
| photon-client/src/components/dashboard/CamerasCard.vue | Removed obsolete switch margin override |
| photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue | Replaced inline styles with no-gutters and padding classes |
| photon-client/src/components/common/pv-switch.vue | Removed top padding on switch and added uniform col padding |
| photon-client/src/components/common/pv-slider.vue | Introduced pt-10px pb-10px for slider cols |
| photon-client/src/components/common/pv-select.vue | Added consistent vertical padding classes |
| photon-client/src/components/common/pv-radio.vue | Added uniform padding, removed custom radio-group margins |
| photon-client/src/components/common/pv-number-input.vue | Standardized padding on input cols |
| photon-client/src/components/common/pv-input.vue | Added consistent padding to input cols |
| photon-client/src/components/cameras/CamerasView.vue | Removed card-title padding and switch padding override |
| photon-client/src/components/cameras/CameraSettingsCard.vue | Simplified dialog card text blocks and spacing |
| photon-client/src/components/cameras/CameraControlCard.vue | Removed extra wrappers, consolidated card-text sections |
| photon-client/src/components/cameras/CameraCalibrationInfoCard.vue | Tightened padding on title and container div |
| photon-client/src/components/cameras/CameraCalibrationCard.vue | Extensive refactor of card-text and form section paddings |
| photon-client/src/components/app/photon-log-view.vue | Reduced dialog padding, adjusted log display height |
| photon-client/src/components/app/photon-log-entry.vue | Added white-space: pre-wrap to preserve newlines |
| photon-client/src/assets/styles/variables.scss | Introduced global spacing utilities (pt-10px, pb-10px, etc.) |
Comments suppressed due to low confidence (1)
photon-client/src/components/dashboard/tabs/TargetsTab.vue:108
- Ensure that
target.areais already expressed as a percentage (0–100) before appending%; otherwise multiply the fraction by 100 or update the label to avoid misleading users.
<td class="text-center">{{ target.area.toFixed(2) }}%</td>
…fit headings fit on one line
Gold856
added
frontend
|
Hey, it looks like this broke the camera calibration flow by hiding the snapshot, cancel, and finish buttons with |
Member
Author
|
Oops, my bad! I'll get a fix ready soon. Thanks for letting us know! |
7 tasks
mcm001
pushed a commit
that referenced
this pull request
Jul 14, 2025
…bration (#1998) ## Description Per #1972 (comment), camera calibration got broken because I accidently hid the entire contents of the camera calibration card in #1972. Now, v-show is only applied to the calibration table so that only the calibration table is hidden during calibration. ## Meta Merge checklist: - [x] Pull Request title is [short, imperative summary](https://cbea.ms/git-commit/) of proposed changes - [x] The description documents the _what_ and _why_ - [ ] If this PR changes behavior or adds a feature, user documentation is updated - [ ] If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly - [ ] If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1 - [ ] If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated - [ ] If this PR addresses a bug, a regression test for it is added
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
After the Vue 3 upgrade, the spacing for various UI elements was left inconsistent in many places. Dialogs were hit especially hard and had some very inconsistent spacing. Additionally, the 24 pixels of padding around all cards was noted as a waste of space and unnecessary, so it has been shrunk down to 20 pixels to make the UI a tiny bit more compact and to make it visually closer to some parts of the UI that have 16 pixels of padding (the camera views are the most notable example). Padding between input elements has also been reduced to 20 pixels (this required some hackery to get consistent sizes on input elements, since switches and sliders have different heights.)
Some other minor UI tweaks were made, such as removing the divider between dialog contents and dialog buttons because it visually looks better, shrinking the banner padding so it doesn't displace as much content, making the banner background one uniform color instead of a highlight around the icon, fixing the targets tab so that the columns stop shifting around when the values change, preserving newlines in the log view, cleaning up the object detection UI, and making the import dialogs have consistently inset input elements.
Old dashboard:
New dashboard:
Old Camera tab:
New Camera tab:
Old Calibration Info:
New Calibration Info:
Old Log Viewer:
New Log Viewer:
Old Pipeline Creation Dialog:
New Pipeline Creation Dialog:
Old Factory Reset:
New Factory Reset:
Old Pipeline Change:
New Pipeline Change:
Old Import Dialog:
New Import Dialog:
Meta
Merge checklist: