fix: extend .controls background to mask .plugin glow bleed

[DavidGBrett]

Problem

The glow effect from a .plugin, especially when hovered over, can show behind the .controls above it as it extends beyond the container width.

Solution

Extend the background of .controls (--bg) using a box shadow to avoid any layout changes or overflow. This box shadow covers the glow from the .plugin behind it.

Before

After

[coderabbitai]

🧹 Nitpick comments (2)

src/pages/plugins/index.astro (2)

71-77: Consider disabling or reducing the extra width at smaller breakpoints.

At the @include breakpoints.sm media query (lines 99-103), the grid switches to a single column, which may reduce the horizontal extent of plugin card glows. The extra 24px width might be unnecessary on mobile devices and could potentially cause layout issues on narrow screens.

📱 Proposed adjustment for responsive behavior

 `@include` breakpoints.sm {
     .controls {
         grid-template-columns: 1fr;
         top: 60px;
+        --extra-side-width: 0px;
     }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/plugins/index.astro` around lines 71 - 77, The extra 24px side
extension defined by --extra-side-width and applied via margin-left/right and
padding-left/right should be reduced or disabled inside the `@include`
breakpoints.sm media query to avoid overflow or visual artifacts on small
screens; update the rules for --extra-side-width (or override margin-left/right
and padding-left/right) within the breakpoints.sm block so the value becomes
smaller (e.g., 0 or a few px) or removed entirely when the grid becomes
single-column, ensuring plugin glows remain correct without causing layout
issues.

---

64-64: Consider consolidating the 24px value to reduce duplication.

The value 24px appears both as gap (line 64) and --extra-side-width (line 73). If these values are intentionally coupled, consider deriving one from the other to improve maintainability.

♻️ Proposed consolidation using a shared variable

+    --grid-gap: 24px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
+    gap: var(--grid-gap);
     margin-top: 24px;
     position: sticky;
     top: 68px;
     background-color: var(--bg);
     padding: 12px 0;
     z-index: 1;
 
     // This extends the background out to block the glow from a .plugin that should appear covered
-    --extra-side-width: 24px;
+    --extra-side-width: var(--grid-gap);
     margin-left: calc(-1 * var(--extra-side-width));

Also applies to: 73-73

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/plugins/index.astro` at line 64, The CSS repeats the literal 24px
for gap and --extra-side-width; consolidate by introducing a single custom
property (e.g., --spacing-24 or --grid-gap) and use it for both places instead
of duplicating the value so that gap and --extra-side-width derive from the same
variable (e.g., set --grid-gap: 24px; then use gap: var(--grid-gap); and
--extra-side-width: var(--grid-gap);), updating the declarations where gap and
--extra-side-width are defined.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/pages/plugins/index.astro`:
- Around line 71-77: The extra 24px side extension defined by --extra-side-width
and applied via margin-left/right and padding-left/right should be reduced or
disabled inside the `@include` breakpoints.sm media query to avoid overflow or
visual artifacts on small screens; update the rules for --extra-side-width (or
override margin-left/right and padding-left/right) within the breakpoints.sm
block so the value becomes smaller (e.g., 0 or a few px) or removed entirely
when the grid becomes single-column, ensuring plugin glows remain correct
without causing layout issues.
- Line 64: The CSS repeats the literal 24px for gap and --extra-side-width;
consolidate by introducing a single custom property (e.g., --spacing-24 or
--grid-gap) and use it for both places instead of duplicating the value so that
gap and --extra-side-width derive from the same variable (e.g., set --grid-gap:
24px; then use gap: var(--grid-gap); and --extra-side-width: var(--grid-gap);),
updating the declarations where gap and --extra-side-width are defined.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b6d29555-0b1a-47bf-953e-9f8a95815e0b

📥 Commits

Reviewing files that changed from the base of the PR and between 81bc89e and c873f20.

📒 Files selected for processing (1)

• src/pages/plugins/index.astro

[DavidGBrett]

The nitpick comment from the bot re layout issues has been resolved by changing to a box shadow.
The other comment is not relevant