Open
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves the mobile layout by reorganizing the font viewer interface and increasing space available for content display. The changes reduce horizontal space taken by tabs on mobile devices (from 240px to 100px) while maintaining better desktop layout.
Key Changes:
- Restructured the grid layout to better accommodate mobile viewports with a responsive breakpoint at 600px
- Moved from a sidebar-based layout to a grid-based layout with dedicated areas for head, tabs, and view
- Renamed
NoFontViewcomponent toFontListand reorganized component file structure
Reviewed changes
Copilot reviewed 9 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/otfjs-ui/src/routes/index.tsx | Updated import from NoFontView to FontList to match renamed component |
| packages/otfjs-ui/src/components/font-view/font-view.tsx | Restructured component hierarchy, removing Sidebar wrapper and adding enhanced textarea focus behavior |
| packages/otfjs-ui/src/components/font-view/font-view.module.css | Implemented CSS Grid layout with named areas and responsive mobile breakpoint |
| packages/otfjs-ui/src/components/font-view/components/json-view.tsx | Uncommented and implemented replacements functionality for JSON data transformation |
| packages/otfjs-ui/src/components/font-view/components/head.module.css | Added grid-area assignment and updated styling to work with new grid layout |
| packages/otfjs-ui/src/components/font-list/font-list.tsx | Renamed component from NoFontView to FontList and updated import paths |
| packages/otfjs-ui/src/components/font-list/font-list.module.css | Added CSS custom property for gap spacing |
| packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.tsx | Updated import paths to reflect new component directory structure |
| packages/otfjs-ui/src/components/font-icon/font-icon.tsx | Fixed image source path by adding leading slash for absolute URL |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+22
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access | ||
| ;(data as any)[key] = replace((data as any)[key]) |
There was a problem hiding this comment.
The implementation uses multiple any type assertions which bypasses TypeScript's type safety. Consider adding a generic type parameter to JsonView to properly type the data object and avoid the need for disabling ESLint rules.
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
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.
Updates the mobile layout so there's more room for the view rather than the tabs taking up most of the horizontal space. Reorganize a bit.