Skip to content

Refine "Coming Soon" card UI and update version to 0.13 Beta #53

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

Merged
LCSOGthb merged 4 commits into from
May 27, 2026
Merged

Refine "Coming Soon" card UI and update version to 0.13 Beta #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8fe6af
feat: enforce square aspect ratio for "Coming Soon" card
v0[bot] May 27, 2026
108dfe9
fix: adjust card dimensions for content-based sizing
v0[bot] May 27, 2026
cda95ed
fix: update main positioning and card sizing for full-screen layout
v0[bot] May 27, 2026
21db952
feat: update version label text to 0.13 Beta
v0[bot] May 27, 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
20 changes: 13 additions & 7 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,18 +100,24 @@ body {
-webkit-backdrop-filter: blur(20px);

@llamapreview llamapreview Bot May 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[Contextual Comment]
This comment refers to code near real line 96. Anchored to nearest_changed(100) line 100.

P2 | Confidence: High

The card's minimum size (280x280px) combined with the main container's p-4 padding (16px each side) requires at least 312px of viewport width to avoid horizontal overflow. On devices with viewport width less than 312px (e.g., some older phones in portrait), the fixed main container (fixed inset-0) will not expand to accommodate the card, causing the card to overflow its parent and likely introducing a horizontal scrollbar or clipping. The previous implementation used relative positioning and min-h-screen, allowing the card to shrink responsively without a hard minimum width. Enforcing a minimum width in a fixed layout breaks graceful degradation on very small screens.

Code Suggestion:

.coming-soon-card {
  /* Remove the hard minimum width; let the clamp default to 80vw/80vh even when below 280px */
  width: clamp(200px, min(80vw, 80vh), 480px);
  height: clamp(200px, min(80vw, 80vh), 480px);
  /* or use min() to allow shrinking further */
  /* width: min(clamp(200px, min(80vw, 80vh), 480px), 100% - 2rem);  */
  ...
}

border: 1px solid var(--border-default);
border-radius: 1.5rem;
padding: 3rem 4rem;
text-align: center;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

@media (max-width: 640px) {
/* Square: fluid size clamped between 280px and 480px */
width: clamp(280px, min(80vw, 80vh), 480px);
height: clamp(280px, min(80vw, 80vh), 480px);
Comment on lines +108 to +109

@sourcery-ai sourcery-ai Bot May 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

issue: Card clamp values can exceed available viewport space on very small screens, causing potential overflow.

Because clamp(280px, min(80vw, 80vh), 480px) enforces a 280px minimum even when min(80vw, 80vh) is smaller, the card can still exceed the actual viewport on very small or chrome-constrained screens, causing scroll or clipping. Please either reduce the minimum size, make the minimum viewport-relative, or add max-width: 100vw; max-height: 100vh; to prevent this overflow.

Comment on lines +108 to +109

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

Using a fixed height with clamp() on a container holding text content is an anti-pattern that can lead to content overflow or clipping when text is resized (e.g., for accessibility/zoom) or when translations are longer than expected.

Changing height to min-height ensures the card maintains its square aspect ratio under normal conditions, but can gracefully expand vertically if the content requires more space.

Suggested change
width: clamp(280px, min(80vw, 80vh), 480px);
height: clamp(280px, min(80vw, 80vh), 480px);
width: clamp(280px, min(80vw, 80vh), 480px);
min-height: clamp(280px, min(80vw, 80vh), 480px);

Comment on lines +108 to +109

@codeant-ai codeant-ai Bot May 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggestion: The new fixed minimum card size of 280px for both width and height can overflow very small viewports, and because the page sets overflow: hidden on html, body, users cannot scroll to recover clipped content. Make the lower bound responsive (or cap dimensions against viewport size) so the card always fits within available screen space. [css layout issue]

Severity Level: Major ⚠️ 
- ❌ Coming Soon landing card clipped on very small viewports.
- ⚠️ Users on tiny windows cannot view entire centered content.
- ⚠️ No scroll available due to global overflow hidden.
Steps of Reproduction ✅ 
1. Note that `html, body` in `app/globals.css` lines 20–24 set `height: 100%` and
`overflow: hidden`, preventing any page scrolling beyond the viewport.

2. Observe that the main layout in `app/page.tsx` lines 38–41 uses `<main
id="main-content" className="fixed inset-0 z-10 flex items-center justify-center p-4">`,
fixing the content to the viewport with no internal scroll container.

3. See that the card rendered at `app/page.tsx` line 42 uses `<div
className="coming-soon-card">`, which is styled in `app/globals.css` lines 96–116,
including the fixed minimum size `width: clamp(280px, min(80vw, 80vh), 480px);` and
`height: clamp(280px, min(80vw, 80vh), 480px);`.

4. Run the app and open the page rendered by `app/page.tsx` (root route), then shrink the
browser or use device emulation so the viewport height is less than 280px; the card still
renders at 280px tall, so its top and/or bottom extend beyond the visible area, and
because `html, body` overflow is hidden and the main is fixed, there is no way to scroll
to reveal the clipped card content.

Fix in Cursor | Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** app/globals.css
**Line:** 108:109
**Comment:**
	*Css Layout Issue: The new fixed minimum card size of `280px` for both width and height can overflow very small viewports, and because the page sets `overflow: hidden` on `html, body`, users cannot scroll to recover clipped content. Make the lower bound responsive (or cap dimensions against viewport size) so the card always fits within available screen space.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

/* Center content inside the square */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
Comment on lines +108 to +115

@coderabbitai coderabbitai Bot May 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Prevent localized text clipping in fixed-height card.

Line 109 + Line 115 force a fixed square with no overflow strategy; longer translations can get clipped, and overflow: hidden on the page removes recovery via scroll. Prefer aspect-ratio with a flexible height floor/overflow handling.

Proposed CSS adjustment 
 .coming-soon-card {
   position: relative;
   background: var(--bg-card);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--border-default);
   border-radius: 1.5rem;
   text-align: center;
   box-shadow:
     0 25px 50px -12px rgba(0, 0, 0, 0.5),
     0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-  /* Square: fluid size clamped between 280px and 480px */
-  width: clamp(280px, min(80vw, 80vh), 480px);
-  height: clamp(280px, min(80vw, 80vh), 480px);
+  width: clamp(280px, min(80vw, 80vh), 480px);
+  aspect-ratio: 1 / 1;
+  min-height: 280px;
   /* Center content inside the square */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem;
+  overflow: auto;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
width: clamp(280px, min(80vw, 80vh), 480px);
height: clamp(280px, min(80vw, 80vh), 480px);
/* Center content inside the square */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
width: clamp(280px, min(80vw, 80vh), 480px);
aspect-ratio: 1 / 1;
min-height: 280px;
/* Center content inside the square */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
overflow: auto;
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/globals.css` around lines 108 - 115, The fixed square using width:
clamp(...) and height: clamp(...) causes localized text to be clipped; replace
the rigid height with an aspect-ratio approach and add a flexible min-height and
overflow handling: remove the height: clamp(...) line, keep or adjust width:
clamp(...) as the horizontal limit, add aspect-ratio: 1/1 to preserve a square
without forcing a fixed height, set min-height: 280px (and optional max-width:
480px) so translations can expand vertically, and add overflow: auto (or
overflow-y: auto) to the same rule so long content becomes scrollable instead of
being clipped; locate and update the CSS rule that contains the
width/height/display/flex properties shown in the diff.

}

@media (max-width: 480px) {
.coming-soon-card {
padding: 2rem 1.5rem;
margin: 0 1rem;
border-radius: 1rem;
border-radius: 1.125rem;
}
}

Expand Down
6 changes: 3 additions & 3 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
{/* Main content - centered card */}
<main
id="main-content"
className="relative z-10 flex min-h-screen items-center justify-center px-4"
className="fixed inset-0 z-10 flex items-center justify-center p-4"

Check warning on line 40 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L40 

This JSX attribute is specific to React.

@devin-ai-integration devin-ai-integration Bot May 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📝 Info: Fixed main element covers entire viewport — potential pointer-event implications

The main element was changed from relative min-h-screen to fixed inset-0 (app/page.tsx:40), meaning it now covers the entire viewport as a fixed overlay at z-index: 10. The version label (app/globals.css:215-225) also uses z-index: 10 but appears later in DOM order, so it paints on top and receives pointer events correctly. The language selector uses z-20 so it's unaffected. This is fine now, but if any future interactive element is added at z-index <= 10, it would be blocked by this invisible full-viewport main layer. A targeted pointer-events: none on main (with pointer-events: auto on the card) would be more defensive.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

high

Using fixed inset-0 on the <main> container locks it to the viewport size and prevents natural page scrolling. When combined with overflow: hidden on the body, any content that exceeds the viewport height (such as on small screens, landscape mobile devices, or when zoomed) will be permanently clipped and inaccessible.

Using min-h-screen (or min-h-dvh for dynamic viewport height) is a more robust approach that keeps the card centered while allowing the page to scroll if the content or viewport constraints require it.

Suggested change
className="fixed inset-0 z-10 flex items-center justify-center p-4"
className="relative z-10 flex min-h-screen items-center justify-center p-4"

>
Comment on lines 38 to 41

@llamapreview llamapreview Bot May 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 | Confidence: Medium

Changing the main wrapper from relative min-h-screen to fixed inset-0 removes the element from normal document flow. While this ensures the card stays centered regardless of other content, it creates a dependency on the correct z‑index stacking for sibling elements (the language selector and version label). The language selector (relative z-20) should remain visible due to higher z‑index, but the version label (likely absolutely positioned) may become incorrectly positioned if its positioning context was previously the main element. Without seeing the .version-label CSS, this is speculative. However, a more robust alternative would be to use a full‑viewport flex container with min-h-screen and overflow-hidden (if scrolling isn’t desired) to avoid unexpectedly breaking the layout of sibling elements. Consider reverting to a relative positioning strategy if the page ever gains additional content.

Code Suggestion:

<main
  id="main-content"
  className="relative z-10 flex min-h-screen items-center justify-center p-4 [overflow-y:auto]"
>

<div className="coming-soon-card">
<h1 className="coming-soon-title">{t.title}</h1>
Expand All @@ -46,8 +46,8 @@
</main>

{/* Version label - bottom right */}
<div className="version-label" aria-label="Version 0.1 Beta">
Version: 0.1 Beta
<div className="version-label" aria-label="Version 0.13 Beta">

Check notice on line 49 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L49 

Incorrect use of string literal detected.

Check warning on line 49 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L49 

The ARIA attribute 'aria-label' is not supported by this element.

Check warning on line 49 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L49 

This JSX attribute is specific to React.
Version: 0.13 Beta
Comment on lines +49 to +50

@devin-ai-integration devin-ai-integration Bot May 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🚩 Version label inconsistency between package.json and displayed text

The displayed version was changed to 0.13 Beta (app/page.tsx:50), but package.json:3 still has "version": "0.1.0". These may be intentionally separate (npm package version vs. user-facing display version), but if they're meant to track each other, this is a drift that will only grow over time. Worth clarifying whether these should stay in sync or if the display version is independent.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

</div>
Comment on lines +49 to 51

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

The aria-label on this <div> is redundant because its value is identical to the text content of the element. Additionally, screen readers generally ignore aria-label on generic non-interactive elements like <div> unless they have an explicit landmark or widget role. Removing the redundant attribute simplifies the HTML without affecting accessibility.

Suggested change
<div className="version-label" aria-label="Version 0.13 Beta">
Version: 0.13 Beta
</div>
<div className="version-label">
Version: 0.13 Beta
</div>

</>
);
Expand Down
Loading