Skip to content

fix: prevent profile metadata text from collapsing #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GulshanJha00 wants to merge 8 commits into
base: main
Choose a base branch
from
+1 −1
Open

fix: prevent profile metadata text from collapsing #474

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
72f862c
Add Gulshan to developer directory
GulshanJha00 May 3, 2026
93b871a
fix: address review feedback
GulshanJha00 May 3, 2026
2a69743
fix: prevent profile metadata from collapsing
GulshanJha00 May 3, 2026
4003542
changed width to 150px
GulshanJha00 May 3, 2026
5041b3e
Resolve merge conflict
GulshanJha00 May 3, 2026
aeed8bf
style: fix formatting
GulshanJha00 May 3, 2026
4d846ba
Merge branch 'main' into fix-tailwind-flex-layout
jbampton May 3, 2026
4ebcaa7
Merge branch 'main' into fix-tailwind-flex-layout
jbampton May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ layout: false
data-skills="{{ person.data.languages }}">
<div class="p-8">
<div class="flex justify-between items-start gap-4">
<div class="flex-1">
<div class="flex-1 min-w-[150px]">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The hardcoded minimum width of 150px may cause layout overflow on small mobile devices. On a 320px wide screen, the card's p-8 padding (64px total) leaves only 256px of content space. Combining this 150px div with the sibling's 112px (7rem) and the 16px (gap-4) results in a total width of 278px, exceeding the container. Consider using a standard Tailwind spacing value like min-w-32 (128px) to ensure the layout fits on small screens while still preventing the metadata from collapsing.

            <div class="flex-1 min-w-32">
References
  1. Adhere to the project's existing CSS framework (Tailwind CSS) conventions by using the standard spacing scale instead of arbitrary values, and ensure responsive layouts do not overflow on small screens.

<h2 class="text-2xl font-bold group-hover:text-accent transition-colors">{{ person.data.name }}</h2>
<p class="text-accent font-semibold text-sm uppercase tracking-wider">{{ person.data.role }}</p>
</div>
Expand Down
Loading