refactor: migrate grid to tailwind #1148
Conversation
| .files-view-wrapper { | ||
| grid-template-rows: max-content max-content 1fr; | ||
| grid-template-areas: | ||
| 'header' | ||
| 'upload' | ||
| 'main'; | ||
| } | ||
| #files-view { | ||
| grid-area: main; |
There was a problem hiding this comment.
I don't see how/why we would need this..?
There was a problem hiding this comment.
Maybe just "not anymore"... I remember that Pascal introduced css grid into our code base, and that must be years ago.
JammingBen
force-pushed
the
refactor/grid-to-tailwind
branch
from
e618059 to
5113ce9
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR refactors grid layouts to use Tailwind CSS classes instead of custom SCSS grid implementations. The main purpose is to standardize styling approaches and simplify the topbar grid to work better across different screen resolutions.
- Migration from custom CSS grid properties to Tailwind utility classes
- Simplified topbar layout with dynamic column configurations based on content state
- Removal of unused SCSS styling for grid layouts across multiple components
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| TopBar.vue | Updated grid layout to use Tailwind classes with dynamic column configurations |
| AppTopBar.vue | Migrated from SCSS grid positioning to Tailwind utility classes |
| ResourceTiles.vue | Moved grid template columns from SCSS to Tailwind @layer components |
| EditDropdown.vue | Converted grid-template-columns to Tailwind utility class |
| SpaceInfo.vue | Removed unused SCSS grid styling |
| FileLinks.vue | Migrated collapsible grid behavior to Tailwind conditional classes |
| AudioMetaPanel.vue | Removed unused SCSS grid template columns |
| FilesViewWrapper.vue | Removed unused SCSS grid areas and template definitions |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
JammingBen
force-pushed
the
refactor/grid-to-tailwind
branch
2 times, most recently
from
f8135b8 to
f941d60
Compare
| .files-view-wrapper { | ||
| grid-template-rows: max-content max-content 1fr; | ||
| grid-template-areas: | ||
| 'header' | ||
| 'upload' | ||
| 'main'; | ||
| } | ||
| #files-view { | ||
| grid-area: main; |
There was a problem hiding this comment.
Maybe just "not anymore"... I remember that Pascal introduced css grid into our code base, and that must be years ago.
JammingBen
force-pushed
the
refactor/grid-to-tailwind
branch
from
f941d60 to
4c9149a
Compare
Also simplifies the topbar grid a bit and makes it work nicely on all screen resolutions (this includes the search icon not being placed in the middle of the screen).
refs #937