Skip to content

Comments

style(ui): improve readability and mobile responsiveness#315

Open
drondeseries wants to merge 11 commits intojavi11:mainfrom
drondeseries:main
Open

style(ui): improve readability and mobile responsiveness#315
drondeseries wants to merge 11 commits intojavi11:mainfrom
drondeseries:main

Conversation

@drondeseries
Copy link
Contributor

🎨 Typography and Contrast

  • Increased Base Fonts: Promoted microscopic [9px] and [10px] fonts to text-xs globally.
  • Improved Contrast: Changed opacity-* classes to standard Tailwind semantic color classes like text-base-content/70 to improve legibility.
  • Table Headers: Table column headers are now larger, properly upper-cased, and easier to scan.

👆 Touch Targets

  • Buttons & Checkboxes: Upgraded the standard list/queue view buttons from minimum btn-xs sizes to btn-sm to make clicking/tapping on rows much more reliable.
  • Checkboxes: Changed checkbox-xs to checkbox-sm globally.

📐 Layout & Spacing

  • Layout Padding: Increased the base main wrapper padding on mobile from p-2 to p-3.
  • Card Spacing: Modified grid column layouts in the FilesPage and HealthPage so that sidebar and content don't feel squished together on narrow desktop screens and correctly wrap on phones.
  • Queue Long Names: Added word wraps to QueueItemCard so extremely long Usenet filenames wrap elegantly to multiple lines instead of shrinking or forcing horizontal scroll.

⚙️ Configuration Page & Navigation

  • Mobile Navbar Shortcut: Added the AltMount logo and a quick-access Settings gear icon directly to the top navbar when viewed on small screens, as the sidebar drawer hides it.
  • Section Contrast: Addressed feedback that config sections blended into the background too much by switching all configuration cards and main page wrappers globally from a flat border with high transparency to border-2 (double thickness) with stronger background opacities (bg-base-200/60).
  • Mobile Header Visibility: Fixed a responsive flex-wrap bug that was causing the "Configuration" title and gear logo to disappear entirely on small screens.
  • Label Wrapping: Fixed various labels across all config tabs that were cutting off instead of gracefully wrapping to the next line on mobile devices (e.g. WebDAV Mount Path, Validation/Cleanup descriptions).

Testing

  • Front-end build verified successfully.
  • Verified compilation with React TypeScript linter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant