Conversation
✅ Deploy Preview for directus-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds the ability to hide blocks from pages and fixes a mobile styling issue where columns with media content were overlapping.
- Adds a
hiddenboolean field to block interfaces and type definitions - Implements logic to skip rendering hidden blocks in the page builder
- Fixes mobile column layout by reordering columns containing media to appear after text content
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| types/schema/routes/page.ts | Adds hidden field to PageBlock interface |
| pages/[...permalink].vue | Adds hidden field to data query and implements logic to skip hidden blocks |
| components/PageBuilder.vue | Adds optional hidden field to PageSectionBlock interface |
| components/Block/Columns.vue | Adds media detection logic and CSS reordering for mobile layout, removes vertical centering |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // On mobile, reorder so text appears above media | ||
| @media (width <= 50rem) { | ||
| order: 1; | ||
|
|
||
| &.has-media { | ||
| order: 2; | ||
| } | ||
| } | ||
|
|
||
| @media (width > 50rem) { | ||
| grid-column: auto / span 1; | ||
| order: unset; |
There was a problem hiding this comment.
[nitpick] The styling changes mix @container queries (lines 95, 110) with @media queries (lines 115, 123) in the same component. This inconsistency could lead to unexpected behavior since container queries are scoped to the container size while media queries are based on viewport size. Consider using @container queries consistently for both breakpoints to ensure the columns respond to their container's size rather than the viewport size.
There was a problem hiding this comment.
@LZylstra Can we update to container queries to stay consistent here?
bryantgillespie
left a comment
bryantgillespie
left a comment
There was a problem hiding this comment.
GTG - just update the @media queries to use @container queries so we stay consistent
Add ability to hide blocks and quick fix for mobile styling issue with Columns with media showing as overlapping