Refresh the UI across the app and make improvements on mobile

[str1fe]

Refreshes the visual layer of the whole application around a coherent set of design tokens, and fixes the mobile layout problems that surfaced along the way.

The direction was picked from three mockups: this one keeps the indigo brand and the existing navigation, and modernises the execution — Inter instead of Montserrat, softer borders and shadows instead of hard 1px gray boxes, 40px controls instead of 48px, tabular figures for durations, and denser rows.

Time log

Before	After

The week strip now shows hours per day, the toolbar is a segmented control, and the day/week totals are chips in the card footer.

Reports

Before	After

One hero figure for total hours, a billable meter instead of two loose legend dots, underline tabs, and right-aligned numeric columns.

Clients & projects

Before	After

A single table made the client boundaries invisible. Each client is now its own card with a tinted header, a project count and its own actions; projects are a plain list inside it.

Mobile

The detailed report overflowed the viewport by 202px, and the tables that did not overflow hid their action column behind a horizontal scrollbar. Below 768px data tables now collapse into stacked cards, using a data-label per cell as the key.

Detailed report before	Detailed report after	Clients & projects after

Every signed-in page was measured at 390px (document.scrollWidth vs viewport); all of them now come out clean.

Tokens and components

• Colors are stored as raw RGB channels and mapped as rgb(var(--x) / <alpha-value>). Several tokens previously held bare HSL triplets, so border-border, bg-muted and hover:bg-accent emitted nothing at all, which is why every view hand-rolled border-gray-100. Opacity modifiers work now.
• New shared classes: page-shell, page-head, surface-card, toolbar-segment, stat-chip, section-head, count-chip, form-label, form-input, form-error, table-stack, table-scroll, tnum.
• ButtonComponent, CardComponent, SplitButtonComponent and the RubyUI primitives (button, link, input, badge, card, table, tabs, dialog, popover, dropdown, tooltip) were restyled through those tokens.

Fixes picked up on the way

• dropdown_component.rb defined three classes in one file, which broke constant reloading in development — any reload made the detailed report and the project form fail with superclass mismatch for class DropdownComponentTrigger. Split into one class per file.
• The cookie banner covered the sign-in button on phone-height viewports, and its full-width wrapper swallowed taps even where nothing was visible, so logging in on a phone looked like it was hanging. The wrapper is pointer-events-none now and the card is much more compact.
• The week strip's per-day totals came from minutes_by_day_of_week, which queries user.time_regs without an organization scope. They are derived from the already authorized @time_regs_week scope instead.
• Workspace::ClientsController did not include SetCurrency, so project rates on the client page rendered without their currency.
• Tooltips are hidden below md. They are useless on touch, and their absolutely positioned w-max boxes were widening the document on phones.
• Added a charset meta tag to the base layout.

Notes for the reviewer

• No behaviour changes beyond the four fixes listed above; the rest is markup and CSS.
• 250 runs, 794 assertions, 0 failures, 0 errors and rubocop clean.
• Verified in a browser on desktop and at 390px, not only in tests.
• The screenshots live on the image-only branch design/ui-refresh-screenshots so they stay out of this diff. That branch can be deleted once this is merged.

🤖 Generated with Claude Code