Cleanup/UI cleanup standardization

[PropzSaladaz]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
laze	Ready	Preview, Comment	May 15, 2026 9:33pm

[qodo-code-review]

Review Summary by Qodo

Comprehensive UI standardization with typography, spacing, and layout refinements

✨ Enhancement

Walkthroughs

Description

• Standardize typography across app using centralized Dimens.text constants
• Refactor command buttons layout with simplified responsive logic and spaceBetween
• Improve disconnect popup styling with standardized spacing and better contrast
• Fix styled button shadow animation isolation and restructure component hierarchy
• Enhance mousepad UI with centered scroll label and aligned bottom icons
• Reduce icon picker grid cell height and standardize input field typography

Diagram

flowchart LR
  A["Typography Constants<br/>Dimens.text"] -->|Applied to| B["Input Fields<br/>StyledInput"]
  A -->|Applied to| C["Text Elements<br/>Across Screens"]
  D["Spacing Constants<br/>Dimens.spacing"] -->|Applied to| E["Disconnect Popup<br/>ConnectionHeader"]
  D -->|Applied to| F["Command Buttons<br/>CommandBtns"]
  G["Layout Refactor<br/>CommandBtns"] -->|Simplifies| H["Responsive Logic<br/>spaceBetween"]
  I["StyledButton<br/>Restructure"] -->|Isolates| J["Shadow Animation<br/>From Theme"]
  K["Mousepad Updates<br/>Centered Scroll"] -->|Aligns| L["Bottom Icons<br/>In Row"]
  M["Icon Picker<br/>Grid Cell"] -->|Reduces| N["Height & Icon Size"]

Loading

File Changes

1. mobile_client/lib/presentation/core/themes/app_theme.dart ✨ Enhancement +4/-4

Standardize hint style typography and add const modifier

mobile_client/lib/presentation/core/themes/app_theme.dart

---

2. mobile_client/lib/presentation/core/themes/dimensions.dart ✨ Enhancement +1/-0

Add display typography dimension constant

mobile_client/lib/presentation/core/themes/dimensions.dart

---

3. mobile_client/lib/presentation/core/ui/styled_button.dart 🐞 Bug fix +16/-11

Isolate shadow animation from theme color changes

mobile_client/lib/presentation/core/ui/styled_button.dart

---

View more (12)

4. mobile_client/lib/presentation/core/ui/styled_input.dart ✨ Enhancement +3/-0

Standardize input field typography using Dimens constants

mobile_client/lib/presentation/core/ui/styled_input.dart

---

5. mobile_client/lib/presentation/core/ui/styled_long_button.dart ✨ Enhancement +3/-1

Add margin parameter for flexible button spacing

mobile_client/lib/presentation/core/ui/styled_long_button.dart

---

6. mobile_client/lib/presentation/home/widgets/command_btns.dart ✨ Enhancement +14/-30

Simplify responsive layout and standardize button spacing

mobile_client/lib/presentation/home/widgets/command_btns.dart

---

7. mobile_client/lib/presentation/home/widgets/connection_header.dart ✨ Enhancement +27/-15

Standardize disconnect popup dimensions and typography

mobile_client/lib/presentation/home/widgets/connection_header.dart

---

8. mobile_client/lib/presentation/home/widgets/home_screen.dart 🐞 Bug fix +3/-2

Fix bottom sheet inset calculation using safe area

mobile_client/lib/presentation/home/widgets/home_screen.dart

---

9. mobile_client/lib/presentation/home/widgets/mousepad.dart ✨ Enhancement +46/-38

Center scroll label and align bottom icons in row

mobile_client/lib/presentation/home/widgets/mousepad.dart

---

10. mobile_client/lib/presentation/home/widgets/not_connected_screen.dart ✨ Enhancement +1/-1

Standardize display heading typography

mobile_client/lib/presentation/home/widgets/not_connected_screen.dart

---

11. mobile_client/lib/presentation/home/widgets/shortcuts_sheet.dart ✨ Enhancement +1/-1

Standardize grid spacing using Dimens constant

mobile_client/lib/presentation/home/widgets/shortcuts_sheet.dart

---

12. mobile_client/lib/presentation/new_shortcut/widgets/icon_picker.dart ✨ Enhancement +5/-3

Reduce grid cell height and standardize icon sizing

mobile_client/lib/presentation/new_shortcut/widgets/icon_picker.dart

---

13. mobile_client/lib/presentation/new_shortcut/widgets/shortcut_input_row.dart ✨ Enhancement +1/-1

Standardize counter text typography

mobile_client/lib/presentation/new_shortcut/widgets/shortcut_input_row.dart

---

14. mobile_client/lib/presentation/onboarding/onboarding_screen.dart ✨ Enhancement +4/-4

Standardize onboarding screen typography using Dimens

mobile_client/lib/presentation/onboarding/onboarding_screen.dart

---

15. mobile_client/lib/presentation/settings/settings_screen.dart ✨ Enhancement +13/-12

Standardize all settings screen typography constants

mobile_client/lib/presentation/settings/settings_screen.dart

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. CommandBtns can overflow ✓ Resolved 🐞 Bug ≡ Correctness

Description

CommandBtns now uses fixed widths (side buttons + center panel) plus compact-mode horizontal
padding, which can exceed the available width after ControllerPage applies its own horizontal
padding, causing a RenderFlex overflow on small screens. This will break layout on narrow
devices/split-screen because the Row cannot shrink its fixed-width children.

Code

mobile_client/lib/presentation/home/widgets/command_btns.dart[R33-41]

+        final isCompact = constraints.maxWidth < 390;
+        final sideWidth = isCompact ? 52.0 : _CommandControlSizes.sideButtonWidth;
+        final panelHeight = isCompact ? 156.0 : _CommandControlSizes.centerPanelHeight;
+        final sideIconSize = isCompact ? 28.0 : _CommandControlSizes.sideButtonIconSize;
+        final sideLabelSize = isCompact ? Dimens.text.body : _CommandControlSizes.sideButtonLabelSize;

        return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 4),
+          padding: EdgeInsets.symmetric(horizontal: isCompact ? Dimens.spacing.md : Dimens.spacing.xl),
          child: Row(

Evidence

HomeScreen renders CommandBtns inside ControllerPage, which applies 20dp horizontal padding
per side. On a 320dp-wide device this reduces the CommandBtns LayoutBuilder constraint to ~280dp.
In compact mode CommandBtns adds 16dp horizontal padding per side (32dp total), leaving ~248dp for
the Row, but the fixed widths require 52 + 160 + 52 = 264dp, which overflows.

mobile_client/lib/presentation/core/ui/controller_page.dart[18-46]
mobile_client/lib/presentation/home/widgets/home_screen.dart[82-145]
mobile_client/lib/presentation/home/widgets/command_btns.dart[29-92]
mobile_client/lib/presentation/core/themes/dimensions.dart[23-36]
mobile_client/lib/presentation/core/themes/dimensions.dart[88-95]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`CommandBtns` switched from constraint-based sizing to fixed widths and larger horizontal padding. In the current widget tree, `ControllerPage` already applies horizontal padding, so on narrow devices the remaining width is not enough for the fixed-size Row children, producing a `RenderFlex overflowed` error.

## Issue Context
- `ControllerPage` adds `Dimens.padding.screenHorizontal` padding on both sides before laying out `HomeScreen`.
- `CommandBtns` then adds its own horizontal padding and uses fixed widths for the three children (`StyledLongButton`, `KeyboardButton`, `StyledLongButton`).

## Fix Focus Areas
- mobile_client/lib/presentation/home/widgets/command_btns.dart[30-92]
- mobile_client/lib/presentation/core/ui/controller_page.dart[18-46]
- mobile_client/lib/presentation/core/themes/dimensions.dart[23-36]
- mobile_client/lib/presentation/core/themes/dimensions.dart[88-95]

## What to change
1. Reintroduce constraint-based sizing for `sideWidth` and especially `centerWidth` using `constraints.maxWidth`.
2. Compute available Row width after the widget’s own horizontal padding, then clamp widths so `sideWidth*2 + centerWidth <= availableWidth`.
3. Pass the computed `centerWidth` to `KeyboardButton(width: centerWidth)` (and keep `margin: EdgeInsets.zero` if desired).

Example approach (pseudo):
- `final horizontalPadding = isCompact ? Dimens.spacing.md : Dimens.spacing.xl;`
- `final available = constraints.maxWidth - 2*horizontalPadding;`
- `final sideWidth = ...clamp(min, max based on available)...;`
- `final centerWidth = (available - 2*sideWidth).clamp(minCenter, maxCenter);`

This ensures no overflow regardless of parent padding or device width.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---