fix(ui): resolve testimonial card readability issues (#655) - #2
Closed
coderboy-yash wants to merge 5 commits into
Closed
fix(ui): resolve testimonial card readability issues (#655)#2coderboy-yash wants to merge 5 commits into
coderboy-yash wants to merge 5 commits into
Conversation
Add the Podman Community Meeting Notes for the August 4, 2026 meeting. Signed-off-by: Tom Sweeney <tsweeney@redhat.com>
…aug_2026_pcm August 2026 PCM notes
Signed-off-by: mheon <7735048+mheon@users.noreply.github.com>
Bump Podman to v6.1.0
Fixes containers#655. - Slider container used justify-center with overflow-x-scroll, which centered content instead of anchoring it to the left. Since the scroll position starts at 0, this clipped the first (leftmost) card off-screen with no way to scroll back to it. Switched to justify-start and added a small left inset so the first card is fully visible on load. - Testimonial cards used bg-white / dark:bg-gray-900, which matches the surrounding section background in both themes, making card boundaries and text hard to read. Switched to the bg-gray-50 / dark:bg-gray-700 convention already used by Card and CustomCard elsewhere in the codebase. - Cards used rounded-sm (sharp corners), inconsistent with rounded-lg used by other card components. Updated to match. - Simplified the header markup: the avatar was pulled to the front visually with an order-first div even though it's declared after the name/handle in the DOM, and an unrelated m-2 on the text wrapper offset it awkwardly relative to the avatar. Reordered the markup so the avatar comes first naturally and gave it a fixed size so it doesn't stretch with content. Signed-off-by: yash nigam <yashnigam.dev@gmail.com>
Owner
Author
|
Superseded — the clipping fix here duplicates containers#632 / PR containers#640, which already covers the root cause. Closing to avoid confusion. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes containers#655.
Problem
On the home page "What people are saying about Podman" section:
rounded-sm), inconsistent with the rest of the site's card components.Root cause
#sliderusedjustify-centeron anoverflow-x-scrollflex container. With content wider than the viewport, this centers the track so the first item starts off-screen to the left ofscrollLeft: 0, making it permanently unreachable.Testimonialcard usedbg-white dark:bg-gray-900, which is the same as the section's background gradient stops, instead of thebg-gray-50 dark:bg-gray-700convention used byCardandCustomCardelsewhere.Fix
justify-center→justify-start, plus a small left inset (px-1) so the first card isn't flush against the edge.rounded-sm→rounded-lg,bg-white dark:bg-gray-900→bg-gray-50 dark:bg-gray-700 dark:shadow-none, matching existing card conventions.order-firstdiv (visually reordering the avatar despite DOM order) and a straym-2that offset the avatar/text block inconsistently — avatar now comes first naturally in the markup with a fixed size.Testing
Ran
docusaurus startlocally and visually verified the testimonial section in both light and dark mode at 1400x900 — all cards, including the first one, render fully within the container with readable contrast and consistent corners. Also rantsc --noEmit; the only errors present are pre-existing and unrelated to these files (tracked separately in containers#661).