fix(typegen): restore field rows visibility in metadata fields dialog#182
Merged
eluce2 merged 1 commit intoproofsh:mainfrom Mar 19, 2026
Merged
Conversation
The previous overflow fix (8ca7a1e) changed the scroll container from a fixed 650px height to height: 100%, but contain: strict requires an explicit resolved height — height: 100% couldn't resolve through the grid parent chain, collapsing the container to 0px. Use a viewport-based calc() height instead. Also remove the border-t on the settings form that was visually colliding with the data grid's bottom border. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
@chriscors is attempting to deploy a commit to the Proof Geist Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughLayout and styling adjustments to the metadata-fields-dialog component. The scroll container height calculation is changed from a percentage-based approach to a fixed viewport-based calculation, and top border styling is removed from the options form container with minor padding adjustment. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment Tip CodeRabbit can enforce grammar and style rules using `languagetool`.Configure the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsx (1)
76-83: Extract the scroll-height magic number into named constants.Line 82 hardcodes
280px, which couples grid height to sibling layout details and can drift as dialog spacing changes. Please replace it with descriptive constants (or a shared CSS variable) to keep this stable and self-documenting.💡 Suggested refactor
+const METADATA_DIALOG_MAX_HEIGHT_VH = 90; +const METADATA_DIALOG_RESERVED_HEIGHT_PX = 280; +const FIELDS_GRID_HEIGHT = `calc(${METADATA_DIALOG_MAX_HEIGHT_VH}vh - ${METADATA_DIALOG_RESERVED_HEIGHT_PX}px)` as const; ... <div className="overflow-auto" ref={tableContainerRef} style={{ contain: "strict", - height: "calc(90vh - 280px)", // Adjust based on dialog header and search input height + height: FIELDS_GRID_HEIGHT, }} >As per coding guidelines,
Use meaningful variable names instead of magic numbers - extract constants with descriptive names.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsx` around lines 76 - 83, Replace the hardcoded "280px" magic number used in the inline style on the DataGrid container with a named constant or CSS variable: introduce a descriptive constant (e.g., DIALOG_HEADER_AND_SEARCH_HEIGHT or CSS var --dialog-header-search-height) and use it inside the height calculation on the element referenced by tableContainerRef within FieldsDataGrid (the inline style currently using "calc(90vh - 280px)"). Update any related comments to reference the constant name and ensure the constant/variable is exported or defined near the component so future layout changes only require updating that single symbol.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsx`:
- Around line 76-83: Replace the hardcoded "280px" magic number used in the
inline style on the DataGrid container with a named constant or CSS variable:
introduce a descriptive constant (e.g., DIALOG_HEADER_AND_SEARCH_HEIGHT or CSS
var --dialog-header-search-height) and use it inside the height calculation on
the element referenced by tableContainerRef within FieldsDataGrid (the inline
style currently using "calc(90vh - 280px)"). Update any related comments to
reference the constant name and ensure the constant/variable is exported or
defined near the component so future layout changes only require updating that
single symbol.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b3b23bb0-5cfa-4d18-9ae4-4cf581619756
📒 Files selected for processing (2)
packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsxpackages/typegen/web/src/components/metadata-fields-dialog/TableOptionsForm.tsx
@proofkit/better-auth
@proofkit/cli
create-proofkit
@proofkit/fmdapi
@proofkit/fmodata
@proofkit/typegen
@proofkit/webviewer
commit: |
Collaborator
|
@chriscors Need to add a changeset otherwise this change won't trigger a release |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
650pxto100%, butcontain: strictrequires an explicit resolved height —height: 100%couldn't resolve through the CSS grid parent chain, collapsing the container to 0pxcalc(90vh - 280px)height instead, derived from the dialog'smax-h-[90vh]minus header/search/settingsborder-ton the settings form that visually collided with the data grid's bottom borderTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes