fix: Safari upload + wallet popup above side panel (#1866)

[webguru-hypha]

Summary

Addresses hypha-dao/hypha-web#1866.

1. Safari lead image upload (fix(ui))

UploadLeadImage: overlay fills dropzone, preview absolutely positioned, w-full min-w-0 on aspect-ratio root; @radix-ui/react-aspect-ratio declared on @hypha-platform/ui.

2. Side panel stacking (updated approach)

The earlier flex-row-reverse + aside-first change was reverted (fea0841a0). It fixed one stacking case but caused main page fixed content (search bar, cards) to paint on top of the Create Space panel because the main column came later in the DOM.

Current fix: restore {children} then {aside} in parallel-route layouts and set z-30 on SidePanel so it sits above the app header (MenuTop uses z-20) and consistently covers the page behind it in Safari and other browsers. className on SidePanel still merges via cn() (e.g. signup z-50).

Commits

• 733000e9e — fix(ui): correct lead image upload layout in Safari
• d20567835 — fix(web): stack main column above aside for wallet popups (superseded in part by revert below)
• 530e64cec — docs(web): note aside row-reverse stacking is cross-browser (historical; row-reverse reverted)
• fea0841a0 — fix(epics): stack side panel above main with z-index

Verification

• npx nx run @hypha-platform/epics:lint, web:lint as needed

Manual: Safari — Create Space panel should cover search/cards; lead image upload behaviour unchanged from UI fix.

Closes #1866

  

Summary by CodeRabbit

• New Features

  • Added aspect-ratio component support to the UI library.

• Style

  • Improved image preview layout, positioning and overlay behavior in the upload UI for better visual stacking and non-interactive overlays.
  • Reversed main/aside ordering on several pages so side panels render before main content, updating page layout flow.

[coderabbitai]

Warning

Rate limit exceeded

@cursor[bot] has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 59 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5cfe81b4-831e-4d07-bd5c-6dcdfdd43ee7

📥 Commits

Reviewing files that changed from the base of the PR and between d205678 and fea0841.

📒 Files selected for processing (6)

• apps/web/src/app/[lang]/dho/[id]/layout.tsx
• apps/web/src/app/[lang]/my-spaces/layout.tsx
• apps/web/src/app/[lang]/network/layout.tsx
• apps/web/src/app/[lang]/profile/[personSlug]/layout.tsx
• apps/web/src/app/[lang]/profile/layout.tsx
• packages/epics/src/common/side-panel.tsx

📝 Walkthrough

Walkthrough

Added Radix AspectRatio dependency and adjusted lead-image upload UI: dropzone switched to block full-width layout, preview image made absolutely positioned with non-interactive overlay, and PreviewImg gained a customizable className prop. Multiple app layouts had their flex direction and render order reversed.

Changes

Cohort / File(s)	Summary
Dependency packages/ui/package.json	Added @radix-ui/react-aspect-ratio (^1.1.3).
Upload components packages/ui/src/upload/lead-image.tsx, packages/ui/src/upload/preview-img.tsx, packages/ui/src/upload/preview-overlay.tsx	Dropzone root changed to block/full-width layout; preview <img> is absolute and non-interactive; PreviewImg accepts optional className and uses clsx('object-cover', className ?? 'h-full w-full'); overlay uses inset-0 z-10 pointer-events-none.
App layouts (flex direction / render order) apps/web/src/app/[lang]/dho/[id]/layout.tsx, apps/web/src/app/[lang]/my-spaces/layout.tsx, apps/web/src/app/[lang]/network/layout.tsx, apps/web/src/app/[lang]/profile/[personSlug]/layout.tsx, apps/web/src/app/[lang]/profile/layout.tsx	Changed container classes to include flex-row-reverse and moved aside to render before main children, adjusting ordering and class ordering (e.g., min-w-0 flex-grow).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• 1024 - Fix UI issues #1045 — Overlapping edits to apps/web/src/app/[lang]/dho/[id]/layout.tsx affecting layout/container ordering.
• feat(#678): fixed spacing for spaces you might like section #758 — Related DHO layout JSX/structure changes and spacing adjustments in the same layout file.

Suggested reviewers

• evgenibir
• sergey3bv

Poem

🐰 I hopped into code with a twitch of my ear,
Tweaked aspect boxes so images appear clear,
Blocked the dropzone, stacked overlays high,
Made previews non-clicky — no more Safari sigh! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main fix: Safari upload layout issue and wallet popup stacking, matching the primary changes in the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #1866: fixes PreviewOverlay positioning, UploadLeadImage layout, PreviewImg className prop, AspectRatio dependency, and layout reordering for stacking context.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the Safari upload layout issue or wallet popup stacking; no unrelated modifications detected.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/qa-issue-1866-7e55

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}