Feat/responsive

[jona159]

Type of Change

• Dependency upgrade
• Bug fix (non-breaking change)
• Breaking change
  • e.g. a fixed bug or new feature that may break something else
• New feature
• Code quality improvements
  • e.g. refactoring, documentation, tests, tooling, ...

Implementation

Checklist

• I gave this pull request a meaningful title
• My pull request is targeting the dev branch
• I have added documentation to my code
• I have deleted code that I have commented out

Additional Information

• This PR closes #

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f93a87b2-d23a-4300-b5e7-8be2aa7aff9d

📥 Commits

Reviewing files that changed from the base of the PR and between bca51a8 and 1b69b2c.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (12)

• app/components/aggregation-filter.tsx
• app/components/device-detail/device-detail-box.tsx
• app/components/device-detail/entry-logs.tsx
• app/components/device-detail/graph.tsx
• app/components/device/new/general-info.tsx
• app/components/device/new/new-device-stepper.tsx
• app/components/header/home/index.tsx
• app/components/map/topbar.tsx
• app/routes/device.$deviceId.edit.transfer.tsx
• app/routes/profile.$username.tsx
• app/routes/settings.profile.tsx
• package.json

🚧 Files skipped from review as they are similar to previous changes (1)

• package.json

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Summary by CodeRabbit

• Enhancements
  • Improved responsive layouts across device management, dashboards, forms, settings, documentation, and landing pages.
  • Added better mobile support with adaptable controls, stacking, wrapping, sizing, and horizontally scrollable tabs.
  • Improved handling of long labels, IDs, links, search results, tables, dialogs, and API documentation.
  • Improved mobile navigation, dialog controls, accessibility announcements, and log viewing.
  • Device activity logs now display newest entries first.
  • Profile dates now follow the selected language after loading.
• Bug Fixes
  • Corrected password recovery navigation, username error messaging, and responsive overflow issues.

Walkthrough

The pull request standardizes responsive layouts across public, device, map, documentation, authentication, and settings views. It also updates overlay behavior, accessibility metadata, device-log ordering, and media-query handling.

Changes

Responsive UI and navigation

Layer / File(s)	Summary
Shared responsive containers and controls app/components/ui/*, app/components/mydevices/dt/data-table.tsx, app/components/search/search-list.tsx, app/components/aggregation-filter.tsx	Dialogs, tables, tabs, search results, data tables, and filter controls now support constrained sizing, scrolling, wrapping, and responsive spacing.
Navigation and authentication overlays app/components/header/*, app/components/landing/header/header.tsx, app/routes/account.password-reset.tsx, app/routes/explore*.tsx, app/routes/explore.tsx	Navigation uses CSS breakpoints. Authentication overlays use local scrollable containers. Menu accessibility attributes and username error references were updated.

Public and application pages

Layer / File(s)	Summary
Landing and about pages app/components/landing/*, app/routes/about.tsx	Landing sections use responsive columns, grids, spacing, image sizing, wrapping, and globe visibility.
Device workflows and detail views app/components/device-detail/*, app/components/device/new/*, app/routes/device*	Device views and forms use responsive sizing, stacking, scrolling, truncation, flexible controls, and ordered log entries.
Map, documentation, profile, and settings app/components/map/topbar.tsx, app/routes/docs.tsx, app/routes/profile.$username.tsx, app/routes/settings*.tsx	Map, Swagger, profile, and settings views use responsive layouts, wrapping, tab scrolling, hydration-aware dates, and mobile-sized controls.
Media-query implementation app/hooks/use-media-query.ts, package.json	A local useMediaQuery hook replaces the removed Mantine hook dependency.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: 🟡 Moderate · up to 1b69b

The responsive UI changes still leave open risks around tablet search usability and date display consistency across locales and time zones, including possible hydration or off-by-one date errors. These bounded issues should be fixed or explicitly accepted before merging.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.69% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 39 functions across 39 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description contains only the contribution template. It does not state what changed, why it changed, or any implementation details.	Add a brief summary of the responsive-layout changes, affected areas, rationale, and any relevant limitations or validation steps.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title identifies the main responsive-layout work across the pull request. It is concise and related to the changeset, although broad.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/responsive

---

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.}

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	66%	2243 / 3398
🔵	Statements	64.54%	2317 / 3590
🔵	Functions	63.26%	434 / 686
🔵	Branches	50.84%	1081 / 2126

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
app/db/models/device.server.ts	61.36%	65.93%	60%	62.4%	91-96, 104, 211, 223-224, 289-346, 386, 420, 449, 478, 508, 512, 520-522, 528-530, 548-550, 554-556, 598-600, 615, 626-798, 849-853, 881-887, 892-908, 990-992, 1003, 1010-1011, 1023-1030, 1034-1045, 1085, 1193-1213, 1232

Generated in workflow #2937 for commit 1b69b2c by the Vitest Coverage Report Action

[coderabbitai]

Actionable comments posted: 7

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f6928b6e-2c50-4134-9e77-a104f3a92bf1

📥 Commits

Reviewing files that changed from the base of the PR and between ec7891c and ae1472f.

📒 Files selected for processing (61)

• app/components/device-detail/device-detail-box.tsx
• app/components/device-detail/graph.tsx
• app/components/device/new/custom-device-config.tsx
• app/components/device/new/general-info.tsx
• app/components/device/new/location-info.tsx
• app/components/device/new/new-device-stepper.tsx
• app/components/error-message.tsx
• app/components/header/download.tsx
• app/components/header/home/index.tsx
• app/components/header/info/index.tsx
• app/components/header/menu/index.tsx
• app/components/header/nav-bar/index.tsx
• app/components/landing/footer.tsx
• app/components/landing/header/header.tsx
• app/components/landing/header/language-selector.tsx
• app/components/landing/header/theme-toggle.tsx
• app/components/landing/sections/connect.tsx
• app/components/landing/sections/features.tsx
• app/components/landing/sections/integrations.tsx
• app/components/landing/sections/partners.tsx
• app/components/landing/sections/pricing-plans.tsx
• app/components/landing/stats.tsx
• app/components/language-select.tsx
• app/components/map/legend.tsx
• app/components/map/topbar.tsx
• app/components/markdown-content.tsx
• app/components/mydevices/dt/data-table.tsx
• app/components/nav-bar.tsx
• app/components/search/search-list-item.tsx
• app/components/search/search-list.tsx
• app/components/theme-select.tsx
• app/components/ui/alert-dialog.tsx
• app/components/ui/dialog.tsx
• app/components/ui/drawer.tsx
• app/components/ui/sheet.tsx
• app/components/ui/table.tsx
• app/components/ui/tabs.tsx
• app/components/ui/toast.tsx
• app/components/viewport-portal.tsx
• app/root.tsx
• app/routes/about.tsx
• app/routes/account.password-reset.tsx
• app/routes/device.$deviceId.dataupload.tsx
• app/routes/device.$deviceId.edit.security.tsx
• app/routes/device.$deviceId.edit.sensors.tsx
• app/routes/device.$deviceId.edit.transfer.tsx
• app/routes/device.$deviceId.edit.tsx
• app/routes/device.dashboard.$deviceId.tsx
• app/routes/device.new.tsx
• app/routes/device.transfer.tsx
• app/routes/docs.tsx
• app/routes/explore.forgot.tsx
• app/routes/explore.login.tsx
• app/routes/explore.register.tsx
• app/routes/imprint.tsx
• app/routes/privacy.tsx
• app/routes/profile.$username.tsx
• app/routes/settings.account.tsx
• app/routes/settings.preferences.tsx
• app/routes/settings.profile.tsx
• app/routes/settings.tsx

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/device-detail/device-detail-box.tsx (1)

100-104: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Timezone-dependent date formatting runs during server render in both components. Neither call site sets timeZone, so the server output uses the server timezone and the client output uses the user timezone. This produces hydration mismatches, and for date-only output it can show a different day.

• app/components/device-detail/device-detail-box.tsx#L100-L104: add an explicit timeZone to the Intl.DateTimeFormat options, and wrap the formatter in useMemo.
• app/components/device-detail/entry-logs.tsx#L48-L48: pass an options object with an explicit timeZone to toLocaleString, and apply the same change to the LogList call on line 105.

Source: Linters/SAST tools

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e84fa16f-1bb7-4cb1-9ae6-599172607358

📥 Commits

Reviewing files that changed from the base of the PR and between ae1472f and a318fc7.

📒 Files selected for processing (15)

• app/components/device-detail/device-detail-box.tsx
• app/components/device-detail/entry-logs.tsx
• app/components/header/nav-bar/index.tsx
• app/components/landing/header/header.tsx
• app/components/landing/sections/pricing-plans.tsx
• app/components/map/topbar.tsx
• app/routes/about.tsx
• app/routes/account.password-reset.tsx
• app/routes/device.$deviceId.edit.tsx
• app/routes/explore.forgot.tsx
• app/routes/explore.login.tsx
• app/routes/explore.register.tsx
• app/routes/explore.tsx
• app/routes/settings.preferences.tsx
• package.json

💤 Files with no reviewable changes (1)

• app/routes/account.password-reset.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/routes/settings.preferences.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

[coderabbitai]

♻️ Duplicate comments (1)

app/routes/about.tsx (1)

200-202: 🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win

Reserve the desktop globe space before mounting GlobeComponent.

useMediaQuery returns false on the first render and updates in useEffect (app/hooks/use-media-query.ts:3-17). On desktop, this hidden wrapper therefore has no layout space during SSR and hydration. After the effect, the globe appears and shifts Stats and the following content down. Keep a fixed-size desktop wrapper and hide only the globe content until the query resolves.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 03bb3ccd-ba42-4178-b883-89cbccf53fda

📥 Commits

Reviewing files that changed from the base of the PR and between a318fc7 and bca51a8.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• app/components/device-detail/entry-logs.tsx
• app/components/landing/header/header.tsx
• app/db/models/device.server.ts
• app/hooks/use-media-query.ts
• app/routes/about.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/landing/header/header.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.