fix(web): Overview Links, stop using Image component #17278
Conversation
RunarVestmann
added
deprecated:automerge
WalkthroughThe pull request modifies the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/components/Organization/Slice/OverviewLinks/OverviewLinks.tsx (1)
Line range hint
3-3: Remove unused importThe
Imagecomponent is imported but no longer used after the changes.-import { Image, SliceType } from '@island.is/island-ui/contentful' +import { SliceType } from '@island.is/island-ui/contentful'
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/components/Organization/Slice/OverviewLinks/OverviewLinks.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/web/components/Organization/Slice/OverviewLinks/OverviewLinks.tsx (1)
Pattern apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (1)
apps/web/components/Organization/Slice/OverviewLinks/OverviewLinks.tsx (1)
58-69: Verify the impact on mobile devices
Since the PR's main objective is to fix mobile rendering issues, we should verify that the new implementation resolves the original problem.
Let's check for any related mobile-specific styles or components:
✅ Verification successful
Mobile layout implementation appears correct
The code implements a responsive grid layout that properly handles mobile devices:
- On mobile (first breakpoint), both image and content columns span full width ('8/8')
- On larger screens, they split into appropriate ratios:
- Image column: ['8/8', '3/8', '4/8', '3/8']
- Content column: ['8/8', '5/8', '4/8', '5/8']
This pattern is consistent with other responsive layouts in the codebase, and the implementation follows the established grid system conventions used across the organization's components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for mobile-specific styles or responsive patterns in related files
rg -t tsx -t css "(\[.*'8/8'.*\]|@media.*mobile|@media.*\(max-width)" apps/web/components/Organization/
Length of output: 139
Script:
#!/bin/bash
# Search for mobile-specific styles or responsive patterns in related files, fixing the file type
rg "(\[.*'8/8'.*\]|@media.*mobile|@media.*\(max-width)" apps/web/components/Organization/
# Also search for GridColumn usage to understand the responsive layout
rg -A 3 "GridColumn" apps/web/components/Organization/Slice/OverviewLinks/
Length of output: 3577
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #17278 +/- ##
==========================================
- Coverage 35.69% 35.68% -0.02%
==========================================
Files 6922 6952 +30
Lines 148522 148646 +124
Branches 42417 42447 +30
==========================================
+ Hits 53008 53037 +29
- Misses 95514 95609 +95
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 55 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 11 Total Test Services: 0 Failed, 10 Passed Test ServicesThis report shows up to 10 services
|
|
Affected services are: web, Deployed services: web. |
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Overview Links, stop using Image component
What
Screenshots / Gifs
Before
After
Checklist:
Summary by CodeRabbit
New Features
<img>tags.Bug Fixes