Conversation
There was a problem hiding this comment.
Pull request overview
This PR styles the devices page to provide a modern, consistent user experience across both mobile web and desktop. The changes align the devices page with the application's design system, using the "public" layout and implementing responsive design patterns that work well on both web and native mobile platforms.
Changes:
- Applied modern styling to the devices index page with proper spacing, typography, and responsive layout
- Changed DevicesController to use the "public" layout for consistency with other non-account-scoped pages
- Added bridge controller support to the public layout for proper integration with native mobile apps
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| saas/app/views/devices/index.html.erb | Complete redesign of the devices list UI with centered panel layout, improved typography, styled device list items with flexbox layout, and added "Your Fizzy accounts" button that's hidden in native apps |
| saas/app/controllers/devices_controller.rb | Changed to use "public" layout to match other non-account-scoped controllers |
| app/views/layouts/public.html.erb | Added bridge controller support (title, text-size, insets) for proper native app integration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…evices-page * origin/style-devices-page: Update saas/app/views/devices/index.html.erb
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| Added <%= local_datetime_tag(device.created_at, style: :daysago) %> | ||
| </span> | ||
| </div> | ||
| <%= button_to saas.device_path(device), method: :delete, class: "btn btn--circle-mobile txt-small", data: { confirm: "Remove this device?" }, form: { class: "flex-item-no-shrink" } do %> |
There was a problem hiding this comment.
The button_to for removing a device uses data: { confirm: "Remove this device?" }, which is the legacy Rails UJS convention. The rest of the codebase uses data: { turbo_confirm: "..." } (e.g., app/views/my/access_tokens/_access_token.html.erb, app/views/webhooks/_webhook.html.erb). With Turbo replacing Rails UJS, data-confirm is no longer processed — the delete button will submit immediately without showing the confirmation dialog. This should be changed to data: { turbo_confirm: "Remove this device?" }.
| <%= button_to saas.device_path(device), method: :delete, class: "btn btn--circle-mobile txt-small", data: { confirm: "Remove this device?" }, form: { class: "flex-item-no-shrink" } do %> | |
| <%= button_to saas.device_path(device), method: :delete, class: "btn btn--circle-mobile txt-small", data: { turbo_confirm: "Remove this device?" }, form: { class: "flex-item-no-shrink" } do %> |
Looks like 👇
In the native apps the header logo and accounts button are hidden.