Skip to content

Fix Layout Overflow in Customization Studio Export Panel (#8260)#8261

Open
kanishka-2007-tech wants to merge 1 commit into
JhaSourav07:mainfrom
kanishka-2007-tech:bug-advsetpanel
Open

Fix Layout Overflow in Customization Studio Export Panel (#8260)#8261
kanishka-2007-tech wants to merge 1 commit into
JhaSourav07:mainfrom
kanishka-2007-tech:bug-advsetpanel

Conversation

@kanishka-2007-tech

@kanishka-2007-tech kanishka-2007-tech commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Description

This PR fixes the layout issue in the Customization Studio where the export action buttons could overflow into the Advanced Settings panel.

The action button container now wraps its children when horizontal space is limited, preventing overlap with the Width, Height, and Grace Days controls while maintaining a clean responsive layout.

Changes Made

Added flex wrapping to the export action button container.
Ensured buttons automatically move onto a new line when space is constrained.
Preserved consistent spacing between wrapped buttons.
Prevented the button group from overflowing into the adjacent settings panel.
Improved responsiveness across different viewport sizes.

Fixes #8260

Pillar

  • 🎨 Pillar 1 — New Theme Design
  • 📐 Pillar 2 — Geometric SVG Improvement
  • 🕐 Pillar 3 — Timezone Logic Optimization
  • 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

image

Checklist before requesting a review:

  • I have read the CONTRIBUTING.md file.
  • I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
  • I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
  • My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
  • I have updated README.md if I added a new theme or URL parameter.
  • I have started the repo.
  • I have made sure that i have only one commit to merge in this PR.
  • The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
  • (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

@kanishka-2007-tech is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

@retenta-bot

retenta-bot Bot commented Jul 22, 2026

Copy link
Copy Markdown

This pull request resolves a layout issue where export buttons were overlapping with the Advanced Settings panel, enhancing the user interface's responsiveness. It's great to see improvements in usability! Additionally, you might find it useful to consider the recent decisions regarding export options and timezone normalization, as they relate to user experience enhancements. Keep up the good work!

@retenta-bot retenta-bot Bot changed the title fix(customization): prevent export panel buttons from overflowing into advanced settings (#8260) Fix Layout Overflow in Customization Studio Export Panel (#8260) Jul 22, 2026
@github-actions

Copy link
Copy Markdown
Contributor

📦 Next.js Bundle Size Report (Gzipped Sizes)

✨ No significant bundle size changes detected.

📊 Summary of Totals

Category PR Size Base Size Difference
Total JS 3985.29 KB 3985.28 KB +0.01 KB (+0.00%)
Total CSS 331.41 KB 331.41 KB 0 B

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Export Panel buttons overflow into advanced settings panel (Customization Studio)

1 participant