Reader: Alignment experiments #2535
Conversation
github-actions
bot
added
the
[Focus] Editor
pfefferle
force-pushed
the
fix/align-view-inspector-spacing
branch
3 times, most recently
from
3322522 to
f0a3643
Compare
Set max-width: 50% on dataviews-view-list__item-wrapper only when the inspector is not present. Uses :not(:has(.inspector-region)) selector to detect when inspector is closed. When inspector is open, items use their natural width to fill available space.
pfefferle
force-pushed
the
fix/align-view-inspector-spacing
branch
from
f0a3643 to
8a9707e
Compare
There was a problem hiding this comment.
Pull request overview
This PR ensures consistent layout spacing in the feed view by constraining DataViews list items to 50% width when the inspector panel is closed, preventing content from expanding to fill the full available space and maintaining visual alignment with the inspector-open state.
Key Changes:
- Added conditional max-width constraint for list items when inspector is closed
- Uses
:has()pseudo-class to detect inspector presence - Maintains consistent behavior across LTR and RTL builds
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/social-web/routes/feed/style.scss |
Added CSS rule to constrain item wrapper width to 50% when inspector is not present, using :not(:has(.inspector-region)) selector |
build/social-web/style-feed-stage.css |
Compiled minified CSS output containing the new max-width constraint rule for LTR layout |
build/social-web/style-feed-stage-rtl.css |
Compiled minified CSS output containing the new max-width constraint rule for RTL layout |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
|
Let's expand on this? This could be a good opportunity to remove the "Feed" title and move the subtitle below "Social Web" in the sidebar. With that, we can limit the width of the entire dataview component and center it. We should probably give it a fixed width, so the 50% don't get too narrow on intermediate size screens like tables. |
I am not sure about centering it... this might be very noisy because it "jumps" around when the inspector opens. but sure let's play around with it. Feel free to give the PR a more generic title to use it for experimenting! |
- Add SidebarDescription component showing contextual text based on active actor. - Site actor: "Posts from accounts this site follows." - User actor: "Posts from accounts you follow." - Center DataViews content with max-width constraint. - Remove Page wrapper from FeedStage for cleaner layout.
|
I like removing the headline. The centered design is not my favorite. It feels bumpy when you click on the items. |
Merges the add/reader branch which removes the excerpt field and uses the content field for all post types. Resolved build file conflicts by regenerating.
|
Maybe in combination with having the inspector always open. |
|
Can you help me understand the bumpiness? In my testing the change is instant when the inspector opens. It feels similar to any other website with centered content changing its width. |
That is what I meant with "bumpiness". The inspector changes the alignment completely and I have to refocus to continue scrolling. I tried to find an english word for "unruhig".
Do you have an example for a site using a centered design and opens something to the right? (Maybe I'm just not used to it.) |
pfefferle
changed the title
Changes: - Created SidebarDescription component from PR #2535 - Displays contextual description based on active actor (site vs user) - Integrated SidebarDescription into inspector default view - Fixed popular tags alignment to left with justify-content: flex-start - Added styles for sidebar description in inspector context The inspector now shows a dynamic description that changes based on whether viewing as the site or as a user. Popular tags are properly left-aligned for better readability.
Changes: - Limited inspector sections to max-width 400px for better readability - Removed border-radius from popular tags menu items (prevented background artifacts) - Removed horizontal padding from popular tags (now padding: 0.5rem 0) - Moved SidebarDescription from inspector to left sidebar (matches PR #2535) - Removed Welcome section from inspector, keeping only Trending tags The inspector now has a cleaner, simpler look with just trending tags, while the contextual description appears in the left sidebar where it's more visible and consistent with the original design.
Summary
Ensures DataViews list items maintain a consistent width only when the inspector is closed, preventing content from expanding to fill all available space.
Changes
max-width: 50%to.dataviews-view-list__item-wrapperonly when inspector is NOT present:not(:has(.inspector-region))selector to detect when inspector is closedVisual Result
Related
Branched from
add/reader