Responsive UI Issue – Image/container misalignment on large and landscape viewports #163

New issue

Closed

opened 2026-05-05 14:25:04 +00:00 by nullvector_ux · 10 comments

nullvector_ux commented 2026-05-05 14:25:04 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

The image inside the left panel does not properly fit its container on larger viewports. This results in visible empty space and misalignment between the image and its border. @PlasticDigits

---

Affected areas

• Rabbit Treasury
• Collection
• Kumbaya
• Sir

---

Observed behavior

• Mobile (portrait): layout appears correct
• Mobile (landscape): issue appears
• Desktop (full screen / large width): issue appears
• Desktop (smaller width / constrained): layout appears correct
• Image does not fully fill the container
• Border and image become misaligned
• Empty space is visible inside the card

---

Expected behavior

• Image should consistently fit its container across all screen sizes and orientations

• No visual gaps or misalignment

• Layout should remain stable regardless of viewport width or orientation

  

  

  

  {width=900 height=488}

---

Additional notes

• Issue occurs when viewport width increases (landscape or large screens)
• Does not occur at smaller widths (portrait or constrained desktop)
• Reproducible across multiple pages → likely a shared component/layout issue

---

Likely Cause

This pattern strongly suggests:

• A breakpoint-specific CSS issue (e.g., styles applied at larger widths)
• Possible causes:
  • Fixed container height applied at larger screens
  • Image not scaling with container (height mismatch)
  • Missing or inconsistent object-fit behavior
  • Layout switching (e.g., flex/grid) without proper resizing rules

---

Suggested Fix (Optional)

• Ensure image and container scale together across all breakpoints
• Review styles applied in:
  • landscape orientation
  • larger screen widths (e.g., ≥1024px, ≥1280px, ≥1440px)
• Use consistent responsive rules:
  • fluid heights instead of fixed heights
  • proper image scaling (object-fit: cover or equivalent)

The image inside the left panel does not properly fit its container on larger viewports. This results in visible empty space and misalignment between the image and its border. @PlasticDigits --- ## Affected areas * Rabbit Treasury * Collection * Kumbaya * Sir --- ## Observed behavior * **Mobile (portrait):** layout appears correct * **Mobile (landscape):** issue appears * **Desktop (full screen / large width):** issue appears * **Desktop (smaller width / constrained):** layout appears correct * Image does not fully fill the container * Border and image become misaligned * Empty space is visible inside the card --- ## Expected behavior * Image should consistently fit its container across all screen sizes and orientations * No visual gaps or misalignment * Layout should remain stable regardless of viewport width or orientation    {width=900 height=488} --- ## Additional notes * Issue occurs when viewport width increases (landscape or large screens) * Does not occur at smaller widths (portrait or constrained desktop) * Reproducible across multiple pages → likely a shared component/layout issue --- # Likely Cause This pattern strongly suggests: * A **breakpoint-specific CSS issue** (e.g., styles applied at larger widths) * Possible causes: * Fixed container height applied at larger screens * Image not scaling with container (`height` mismatch) * Missing or inconsistent `object-fit` behavior * Layout switching (e.g., flex/grid) without proper resizing rules --- # Suggested Fix (Optional) * Ensure image and container scale together across all breakpoints * Review styles applied in: * landscape orientation * larger screen widths (e.g., ≥1024px, ≥1280px, ≥1440px) * Use consistent responsive rules: * fluid heights instead of fixed heights * proper image scaling (`object-fit: cover` or equivalent)

nullvector_ux commented 2026-05-05 14:25:50 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

changed the description

changed the description

Brouie commented 2026-05-05 23:51:54 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in issue #164

mentioned in issue #164

Brouie commented 2026-05-06 03:23:16 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in issue #113

mentioned in issue #113

nullvector_ux commented 2026-05-06 11:04:33 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

changed the description

changed the description

PlasticDigits commented 2026-05-06 12:39:16 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit 99ba28d6ed

mentioned in commit 99ba28d6ed824710b70f2e12962a21a5f9343694

PlasticDigits commented 2026-05-06 12:39:16 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit c1e3142b9b

mentioned in commit c1e3142b9b57ea4c258d80a37c7a103d66fa68a4

PlasticDigits commented 2026-05-06 12:40:35 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

Update (merged to main)

What changed

• Root cause: .split-layout is CSS Grid with default align-items: stretch. The left .placeholder-figure stretched to the taller right column (PageSection) while the <img> kept intrinsic height, so the bordered card showed empty panel below the art on wide desktop and landscape layouts (Rabbit Treasury, Collection, Kumbaya, Sir).
• Fix: frontend/src/index.css — .split-layout > .placeholder-figure now uses align-self: start, width: 100%, max-width: min(42rem, 100%), min-width: 0 so the frame shrink-wraps the image and uses the column width up to the same cap as placeholder-figure--wide.

Docs / invariants

• INV-FRONTEND-163 — invariants §163
• Contributor manual QA: manual-qa-checklists.md#manual-qa-issue-163
• Design note: design.md — Placeholder split panels
• Third-party / agent index: skills/README.md (contributor QA paragraph)
• Vitest guard: frontend/src/lib/placeholderSplitLayoutCss.test.ts (parses index.css for the rule block)

Verification checklist (for QA)

• Desktop, width > ~720px (two columns): /rabbit-treasury, /collection, /kumbaya, /sir — left scene card border hugs the image (no tall empty band inside the frame).
• Landscape where two columns still apply — same (no gap between image bottom and inner border).
• Narrow / stacked (max-width: 720px) — layout stacks; no horizontal overflow or clipped image.
• CI / local: cd frontend && npm test -- --run src/lib/placeholderSplitLayoutCss.test.ts

Requesting verification from @nullvector_ux when you have a moment.

Issue left open per maintainer request.

## Update (merged to `main`) ### What changed - **Root cause:** `.split-layout` is CSS Grid with default **`align-items: stretch`**. The left **`.placeholder-figure`** stretched to the **taller** right column (`PageSection`) while the **`<img>`** kept **intrinsic height**, so the bordered card showed **empty panel** below the art on **wide desktop** and **landscape** layouts (Rabbit Treasury, Collection, Kumbaya, Sir). - **Fix:** `frontend/src/index.css` — **`.split-layout > .placeholder-figure`** now uses **`align-self: start`**, **`width: 100%`**, **`max-width: min(42rem, 100%)`**, **`min-width: 0`** so the frame shrink-wraps the image and uses the column width up to the same cap as **`placeholder-figure--wide`**. ### Docs / invariants - **`INV-FRONTEND-163`** — [invariants §163](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/testing/invariants-and-business-logic.md#placeholder-split-layout-figure-gitlab-163) - Contributor manual QA: [manual-qa-checklists.md#manual-qa-issue-163](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/testing/manual-qa-checklists.md#manual-qa-issue-163) - Design note: [design.md — Placeholder split panels](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/design.md#placeholder-split-panels-gitlab-163) - Third-party / agent index: [skills/README.md](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/skills/README.md) (contributor QA paragraph) - Vitest guard: `frontend/src/lib/placeholderSplitLayoutCss.test.ts` (parses `index.css` for the rule block) ### Verification checklist (for QA) - [ ] **Desktop, width > ~720px (two columns):** `/rabbit-treasury`, `/collection`, `/kumbaya`, `/sir` — left scene card border **hugs** the image (no tall empty band **inside** the frame). - [ ] **Landscape** where two columns still apply — same (no gap between image bottom and inner border). - [ ] **Narrow / stacked** (`max-width: 720px`) — layout stacks; no horizontal overflow or clipped image. - [ ] **CI / local:** `cd frontend && npm test -- --run src/lib/placeholderSplitLayoutCss.test.ts` Requesting verification from @nullvector_ux when you have a moment. _Issue left open per maintainer request._

Brouie commented 2026-05-11 10:59:04 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

verified at HEAD c3b43b8 — full pass on all three viewport scenarios.

source spot-check:

• .split-layout > .placeholder-figure rule in frontend/src/index.css applies the four fix properties: min-width: 0, width: 100%, max-width: min(42rem, 100%), align-self: start — the align-self: start is the root-cause fix (overrides default align-items: stretch so the left figure no longer stretches to match the taller right column)

tests:

• targeted guard placeholderSplitLayoutCss.test.ts 1/1 pass (parses index.css for the rule block)
• full vitest 313/313 pass — no regressions

live walk on fresh stack at HEAD (active swarm running):

Wide desktop (>~1024px): PASS on all 4 routes

• /rabbit-treasury — left scene card border hugs the cinematic illustration cleanly, right WHAT EXISTS NOW panel taller without stretching the image card
• /collection — same shape, Leprechaun Collection art frame ends at image bottom
• /kumbaya — image card hugs the Kumbaya art, no empty band below
• /sir — gorilla/leprechaun scene fits frame cleanly

Landscape, 2 columns still apply (932 × 430): PASS on all 4 routes — image card stays compact while right VENUE SNAPSHOT / LAUNCH TRACK panels extend taller without affecting the left figure

Narrow stacked (<720px): PASS — layout stacks vertically (image card on top, panel below), no horizontal overflow, no clipped image

ready for close on your side @PlasticDigits

verified at HEAD c3b43b8 — full pass on all three viewport scenarios. source spot-check: - `.split-layout > .placeholder-figure` rule in frontend/src/index.css applies the four fix properties: `min-width: 0`, `width: 100%`, `max-width: min(42rem, 100%)`, `align-self: start` — the `align-self: start` is the root-cause fix (overrides default `align-items: stretch` so the left figure no longer stretches to match the taller right column) tests: - targeted guard `placeholderSplitLayoutCss.test.ts` 1/1 pass (parses index.css for the rule block) - full vitest 313/313 pass — no regressions live walk on fresh stack at HEAD (active swarm running): **Wide desktop (>~1024px):** PASS on all 4 routes - `/rabbit-treasury` — left scene card border hugs the cinematic illustration cleanly, right `WHAT EXISTS NOW` panel taller without stretching the image card - `/collection` — same shape, Leprechaun Collection art frame ends at image bottom - `/kumbaya` — image card hugs the Kumbaya art, no empty band below - `/sir` — gorilla/leprechaun scene fits frame cleanly **Landscape, 2 columns still apply (932 × 430):** PASS on all 4 routes — image card stays compact while right `VENUE SNAPSHOT` / `LAUNCH TRACK` panels extend taller without affecting the left figure **Narrow stacked (<720px):** PASS — layout stacks vertically (image card on top, panel below), no horizontal overflow, no clipped image ready for close on your side @PlasticDigits

PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-11 11:07:12 +00:00

PlasticDigits commented 2026-05-13 15:13:34 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit c343300646

mentioned in commit c343300646f792b3da3cdd0c9bad4cbc49461471

PlasticDigits commented 2026-05-13 15:13:34 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit 43618ae4b0

mentioned in commit 43618ae4b0695708288e960738a7e3d44746a564

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

cac-design-issue-544

renovate/configure

No results found.

Labels

Clear labels   

agent:fix_bugfix

  

agent:fix_conflicts

  

agent:fix_security

  

agent:gap_analysis

  

agent:implement

  

agent:open_issues

  

agents

  

agent:security_audit

  

agent:verify

  

area

timecurve

  

arena

  

arena-v2

  

audit

  

block:feature_review

  

block:security

  

bug

  

contracts

  

design

  

devops

  

docs

Documentation

  

documentation

  

enhancement

  

epic

Epic / umbrella issue

  

feature

  

frontend

  

indexer

  

low priority

Low priority, investigate other issues first

  

megaeth

  

operations

  

ops

Deploy and operations

  

performance

  

QA

  

qa checklist

  

referrals

  

removal

Legacy removal

  

security

  

smart-contracts

  

tech-debt

  

testing

  

time-arena

TimeArena v2 revamp

  

timecurve

  

visual-qa

No labels

agent:fix_bugfix

agent:fix_conflicts

agent:fix_security

agent:gap_analysis

agent:implement

agent:open_issues

agents

agent:security_audit

agent:verify

area

timecurve

arena

arena-v2

audit

block:feature_review

block:security

bug

contracts

design

devops

docs

documentation

enhancement

epic

feature

frontend

indexer

low priority

megaeth

operations

ops

performance

QA

qa checklist

referrals

removal

security

smart-contracts

tech-debt

testing

time-arena

timecurve

visual-qa

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

code/yieldomega#163

No description provided.