fix: topbar save icon hover color and thumbnail compression #1294
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes UI issues in the top bar component and improves thumbnail display in file lists. It addresses save icon hover color inconsistencies and prevents horizontal compression of thumbnails on small screens.
- Refactors AppTopBar and ResourceListItem components to use Vue 3 Composition API
- Removes CSS styles in favor of Tailwind utility classes for consistent styling
- Updates CSS class structures to prevent thumbnail compression
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web-pkg/src/components/AppTopBar.vue | Converts to script setup and replaces CSS with Tailwind classes for hover colors |
| packages/web-pkg/src/components/FilesList/ResourceListItem.vue | Converts to script setup and adjusts CSS classes to prevent thumbnail compression |
| packages/web-pkg/tests/unit/components/snapshots/AppTopBar.spec.ts.snap | Updates test snapshots to reflect new CSS classes |
| packages/web-pkg/tests/unit/components/FilesList/snapshots/ResourceTiles.spec.ts.snap | Updates test snapshots for simplified class names |
| packages/web-pkg/tests/unit/components/FilesList/snapshots/ResourceListItem.spec.ts.snap | Updates test snapshots for modified component structure |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| :link="link" | ||
| :is-resource-clickable="isResourceClickable" | ||
| class="oc-resource-icon-link relative" | ||
| class="contents relative" |
There was a problem hiding this comment.
The contents CSS display value removes the element from the normal document flow, which could cause unexpected layout issues. Consider using a more explicit layout class like flex or inline-flex to maintain predictable behavior.
| class="contents relative" | |
| class="inline-flex relative" |
| :src="thumbnail" | ||
| :data-test-thumbnail-resource-name="resource.name" | ||
| class="oc-resource-thumbnail rounded-xs size-8 object-cover" | ||
| class="rounded-xs size-8 object-cover" |
There was a problem hiding this comment.
The removal of the oc-resource-thumbnail class may break existing CSS selectors or styling dependencies elsewhere in the codebase. Ensure this class isn't referenced in other stylesheets or used for testing selectors.
| class="rounded-xs size-8 object-cover" | |
| class="oc-resource-thumbnail rounded-xs size-8 object-cover" |
Fixes the topbar save icon on hover and prevents thumbnails from horizontally compressing in the file list on small screens.
Also refactors 2 components to script setup. Review by commits for an easier time.
Fixes #1279