Bigger mobile stuff, responsive filter options, moved burger btn

[myieye]

Several overlapping adjustments:

• Moved the burger button/sidebar trigger out of the search bar, because users reported that as confusing
• That made the collapsible filters look ugly, so I moved that into a responsive popup, which I had actually wanted to do for a while (drawer on mobile and overlay/popover on desktop).
• On mobile: Made sidebar menu buttons and the search bar taller, because they all felt tiny on mobile for me and the search bar was about 50% the size of the Gmail search bar on my phone, so it wasn't just me.

Before:

After:

Before:

After - mobile:

After - desktop:

Before:

After:

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This PR refactors frontend UI components by simplifying sidebar trigger usage patterns, introducing responsive height adjustments using Tailwind's md: breakpoint, adding contentProps support to the responsive popup component, and replacing a collapsible-based filter UI with a responsive popup pattern in the search filter.

Changes

Cohort / File(s)	Summary
Sidebar Trigger Simplification frontend/viewer/src/lib/activity/ActivityView.svelte, frontend/viewer/src/project/tasks/TasksView.svelte	Removed iconProps and size props from SidebarTrigger usage, simplifying the component invocation to only pass icon and class props.
Sidebar UI Components frontend/viewer/src/lib/components/ui/sidebar/sidebar-menu-button.svelte, frontend/viewer/src/lib/components/ui/sidebar/sidebar-trigger.svelte	Adjusted sizing tokens with responsive breakpoints (md:) for menu buttons and removed automatic default sizing logic from trigger component by eliminating cn() composition and conditional sizing.
Popup & Dialog Components frontend/viewer/src/lib/components/responsive-popup/responsive-popup.svelte, frontend/viewer/src/lib/about/FeedbackDialog.svelte	Added contentProps type and public prop to responsive popup for flexible content configuration with class merging; added text-start class alignment to feedback dialog button.
Filter & Dropdown Components frontend/viewer/src/project/browse/SearchFilter.svelte, frontend/viewer/src/project/ProjectDropdown.svelte	Replaced collapsible-based filter UI with responsive popup pattern and mobile-aware toggle sizing; added responsive height classes (h-12 md:h-10) to project dropdown trigger button.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Explain lite vs classic views #2096 — Modifies responsive-popup component to add contentProps support and conditional title rendering in tandem with this PR's changes.
• add a sidebar trigger to the activity page to prevent getting stuck on mobile #1751 — Introduces SidebarTrigger usage with iconProps and size props that this PR removes and simplifies.
• Touch up menu items and theme picker #1551 — Modifies sidebar and ProjectDropdown components concurrently with responsive design adjustments.

Suggested labels

💻 FW Lite

Suggested reviewers

• hahn-kev
• rmunn

Poem

🐰 Whiskers twitching with glee

The sidebar shrinks at breakpoints grand,
Popups bloom where collapsibles once stand,
Triggers trimmed of excess weight,
Heights responsive, sizing straight—
A hop, a skip, the UI's fixed! 🎨✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly summarizes the main changes: moving the burger button, making mobile elements bigger, and implementing responsive filter options—all primary objectives of the changeset.
Description check	✅ Passed	The description provides clear context for all major changes including the burger button relocation, responsive popup implementation, and mobile sizing improvements, with supporting before/after screenshots.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

UI unit Tests

  1 files  ±0   47 suites  ±0   19s ⏱️ ±0s
123 tests ±0  123 ✅ ±0  0 💤 ±0  0 ❌ ±0 
184 runs  ±0  184 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit 557e4ea. ± Comparison against base commit 0973431.

♻️ This comment has been updated with latest results.

[github-actions]

C# Unit Tests

146 tests  ±0   146 ✅ ±0   19s ⏱️ -1s
 22 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 557e4ea. ± Comparison against base commit 0973431.

♻️ This comment has been updated with latest results.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/viewer/src/project/browse/SearchFilter.svelte`:
- Around line 109-110: The Sidebar.Trigger currently uses only "aspect-square
p-0" which may not guarantee a usable touch target; update the Sidebar.Trigger
element (the one with icon="i-mdi-menu") to include explicit sizing classes
(e.g., set width/height such as w-10 or w-12 and matching h-10/h-12 and
comfortable padding like p-2) so the rendered button meets touch-target
guidelines, and verify it visually and via mobile touch emulation; keep
ComposableInput sizing (class="px-1 ... h-12") unchanged unless layout shifts
require adjusting neighboring spacing.

🧹 Nitpick comments (1)

frontend/viewer/src/project/browse/SearchFilter.svelte (1)

109-128: Prefer icons imported from $lib/icons/.

Both the menu and filter icons are referenced via string IDs. The guideline here is to import icons from $lib/icons/ for icon components to keep the icon pipeline consistent. As per coding guidelines, please switch to icon imports from $lib/icons/.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	6 changed	Jan 23, 2026, 1:49 PM