💄 Adjust ERDEditor height to fill remaining available space

[junkisai]

Issue

N/A

Why is this change needed?

The height of the ERDEditor on the Schema page was set to 100dvh, which caused the bottom part—including the toolbar—to be cut off and not visible.

I adjusted the height of the ERDEditor to fill the remaining space after rendering components like the AppBar and ProjectHeader.

What would you like reviewers to focus on?

Testing Verification

Before	After

What was done

🤖 Generated by PR Agent at c9656f8

• Refactored layout to ensure ERDEditor fills available space
• Updated CSS for grid-based layouts and height management
• Added dedicated ERDEditor styles for consistent sizing
• Improved tab content handling for better UI responsiveness

Detailed Changes

Relevant files

Enhancement

layout.module.css Refactor project layout to use grid and improve tab sizing frontend/apps/app/app/(app)/app/projects/[projectId]/layout.module.css Changed .container from flex to grid for better layout control Set grid-template-rows to auto 1fr for header/content separation Updated .tabContent to use min-height: 0 for proper overflow Removed unnecessary padding from .tabContent +3/-4      SchemaPage.module.css Add and update styles for schema page tab content                frontend/apps/app/features/schemas/pages/SchemaPage/SchemaPage.module.css Added .tabsContent class with min-height: 0 for tab content Ensured grid layout for schema page wrapper +4/-0      ERDEditor.module.css Add dedicated wrapper styles for ERDEditor component          frontend/apps/app/features/schemas/pages/SchemaPage/components/ERDEditor/ERDEditor.module.css Introduced new .wrapper class for ERDEditor Set position: relative and height: 100% for full height usage +4/-0      layout.tsx Refactor layout to use TabsRoot as main container                frontend/apps/app/app/(app)/app/projects/[projectId]/layout.tsx Changed root container from div to TabsRoot for direct tab management Passed container className to TabsRoot for grid layout Simplified component structure for better layout consistency +27/-29  SchemaPage.tsx Apply new tab content styles for SchemaPage tabs                  frontend/apps/app/features/schemas/pages/SchemaPage/SchemaPage.tsx Applied new tabsContent class to TabsContent components Ensured tab content uses updated styles for height management +2/-2      ERDEditor.tsx Use wrapper class for ERDEditor container styling                frontend/apps/app/features/schemas/pages/SchemaPage/components/ERDEditor/ERDEditor.tsx Replaced inline style with new .wrapper class for ERDEditor container Imported and applied new module CSS for consistent sizing +2/-1

Additional Notes

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c9656f8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[supabase]

This pull request has been ignored for the connected project vsdfxfkorhtkxqcpczyr due to reaching the limit of concurrent preview branches.
Go to Project Integrations Settings ↗︎ if you wish to update this limit.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2025 11:57am
liam-erd-sample	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2025 11:57am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	⬜️ Ignored (Inspect)			Apr 24, 2025 11:57am

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing TabsContent The TabsContent components were incorrectly nested in the diff. The ERDEditor and OverrideEditor components should be inside their respective TabsContent components, not alongside them. <TabsContent value={SCHEMA_TAB.ERD} className={styles.tabsContent}> <ERDEditor {...contentProps} /> </TabsContent> <TabsContent value={SCHEMA_TAB.EDITOR} className={styles.tabsContent}> <OverrideEditor /> </TabsContent>

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Add overflow handling Consider adding overflow handling to the wrapper element to prevent content from being cut off when the ERD diagram is larger than the available space. frontend/apps/app/features/schemas/pages/SchemaPage/components/ERDEditor/ERDEditor.tsx [95] -<div className={styles.wrapper}> +<div className={styles.wrapper} style={{ overflow: 'auto' }}> Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding overflow handling is important for ERD diagrams which can be larger than the viewport. This prevents content from being cut off and ensures users can scroll to see all content, improving usability significantly.	Medium
More

[MH4GF]

Thanks!!