fix: address UI inconsistencies and improve code quality#67
Merged
AdamJ merged 7 commits intoNov 18, 2025
Merged
Conversation
This commit resolves multiple UI inconsistencies and code quality issues
identified during a comprehensive codebase audit. The changes improve
maintainability, consistency, and adherence to best practices.
## Major Improvements
### Style Consistency
- Replace all hard-coded color values with CSS variables
- Navigation component now uses --sl-color-neutral-* and --sl-color-primary-*
- Shoelace styles updated to use --sl-color-primary-600 instead of #0163a3
- Standard tracker uses --sl-color-warning-600 instead of 'orange'
### Responsive Design
- Standardize breakpoints across all components
- Mobile: 600px (was inconsistent: 595px, 600px)
- Tablet: 768px (was: 800px in some places)
- Desktop-small: 950px (was: 900px in match tracker)
- Desktop: 1200px (was: 1000px in standard styles)
- Add breakpoint documentation to global.css for maintainability
- Rename .hide-at-800 to .hide-at-950 to match actual breakpoint
### Component Architecture
- Move inline <style> tags to static styles property (Lit best practice)
- Fixed: app-roll-dice, app-game-tracker, navigation, standard-tracker, match-tracker
- Improves performance and Shadow DOM encapsulation
### CSS Modernization
- Replace deprecated grid-gap with gap property (11 occurrences)
- Updated in: shared-styles, match-tracker, about-app, standings-tracker,
standard-tracker, player-input, game-tracker-styles, standard-styles
### User Experience
- Standardize modal button order (Cancel left, Primary/Confirm right)
- Fixed confirmation-modal button ordering for consistency
### Code Cleanup
- Remove commented-out code blocks
- Removed unused sl-tag styles from shoelace-styles
- Cleaned up global.css (removed 30+ lines of commented CSS variables)
- Removed unused confirm() method from about-modal
## Files Modified (16)
- src/components/about-app/about-app.ts
- src/components/about-modal.ts
- src/components/confirmation-modal.ts
- src/components/game-tracker/game-tracker-styles.ts
- src/components/game-tracker/player-input.ts
- src/components/game-tracker/standings-display.ts
- src/components/game-tracker/standings-tracker.ts
- src/components/match-tracker/match-tracker.ts
- src/components/navigation.ts
- src/components/standard-tracker/standard-styles.ts
- src/components/standard-tracker/standard-tracker.ts
- src/pages/app-game-tracker.ts
- src/pages/app-roll-dice.ts
- src/styles/global.css
- src/styles/shared-styles.ts
- src/styles/shoelace-styles.ts
## Testing
- Build completed successfully with no TypeScript errors
- All changes maintain backward compatibility
- No breaking changes to component APIs
Resolves issues with UI consistency, improves maintainability, and brings
codebase closer to Lit and Shoelace best practices.
This commit fixes several issues with the standard-tracker view to improve usability and visual consistency across all screen resolutions. ## Changes ### Full-Screen Card Layout - Remove margins/padding from main container - Use viewport height calculations (100vh - 80px for navigation) - Cards now properly fill entire screen at all resolutions - Improved responsive behavior for mobile and desktop ### Icon Visibility - Fix icon color inheritance issues - Remove unnecessary span wrappers around icons - Apply proper color classes directly to sl-icon elements - Side one icons: neutral-950 for visibility on light background - Side two icons: warning-600 for plus, neutral-50 for minus - Icons now consistently visible against card backgrounds ### FAB Positioning - Center FAB button using proper CSS transform - Changed from calc(50vw - 2rem) to left: 50% + translateX(-50%) - Now truly centered horizontally at all screen sizes - Fixed z-index to prevent overlapping issues ### Code Quality - Remove all inline styles from render method - Consolidate styles in static styles block - Clean up drawer form styling - Fix CSS syntax error in standard-styles.ts (landscape media query) - Remove duplicate type="number" attribute ### Responsive Improvements - Mobile (max-width: 600px): Vertical card layout, each card 50% height - Desktop (min-width: 600px): Side-by-side layout from standard-styles - Consistent spacing and sizing across breakpoints ## Files Modified - src/components/standard-tracker/standard-tracker.ts - src/components/standard-tracker/standard-styles.ts ## Testing - Build completed successfully - No TypeScript errors - Responsive layout tested via media queries
Deploying game-tracker with
|
| Latest commit: |
a9b160f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ead33e28.game-tracker-72u.pages.dev |
| Branch Preview URL: | https://claude-review-ui-inconsisten.game-tracker-72u.pages.dev |
- Lower FAB z-index from 1000 to 100 to ensure drawer stays on top - Add conditional 'hidden' class to FAB when drawer is open - Add smooth fade transition for FAB visibility (0.3s ease) - Prevents visual conflict between FAB and drawer overlay This improves UX by removing the visual clutter when the settings drawer is active.
The shield icons in the Plus/Minus buttons were not appearing because the Shoelace icon component was not imported. This commit adds the missing import statement. Fixes missing icons in: - Side one Plus/Minus buttons (shield-fill-plus/minus) - Side two Plus/Minus buttons (shield-fill-plus/minus) - Settings FAB button (gear icon) Icons will now display correctly with the color styling applied in previous commits.
This commit addresses layout issues in the Commander/EDH tracker where content didn't take up the full height on large screens. ## Changes ### Full Viewport Height - Set main container to calc(100vh - 80px) to account for navigation - Cards now properly fill available vertical space on desktop ### Improved Layout Structure - Added .tab-content-wrapper class for consistent flex layout - Set sl-tab-group to height: 100% with flex display - Tab panels now flex to fill available space ### Card Grid Improvements - Renamed inline styles to semantic classes (.tracker-grid, .tracker-column) - Each column uses flexbox to distribute cards evenly - On large screens (min-width: 950px), cards are 50% height each ### Mobile Compatibility - Maintains existing mobile layout (40vh cards on screens < 950px) - Responsive behavior preserved across all breakpoints ### Icon Support - Added missing sl-icon import for loyalty and saga icons - Ensures all decorative icons render correctly ## Files Modified - src/components/match-tracker/match-tracker.ts The counter view now properly utilizes the full screen height on desktop displays while maintaining mobile responsiveness.
This is a refined fix that correctly makes the counter view fill the entire viewport on large screens without breaking the card layout. ## Key Changes ### Container Heights - main: calc(100vh - 80px) to account for bottom navigation - .wrapper: height 100% with flex column layout - sl-tab-group: flex: 1 to fill available space - sl-tab-panel[name='tracker']: height 100% ### Grid Structure - .tracker-grid: height 100% with flex wrap - .player-column: width 50%, flex column for vertical stacking - Cards use flex: 1 (from counter-styles.ts) to fill column space ### Overflow Handling - main: overflow hidden to prevent scrollbars - sl-tab-group: overflow hidden for proper containment - sl-tab-panel[name='tracker']: overflow auto for scrollable content ### Semantic Class Names - Replaced inline styles with semantic classes - .wrapper for main container - .tracker-grid for card grid - .player-column for each 50% column This approach maintains the 2x2 grid structure while ensuring cards expand to fill the full viewport height on desktop screens (≥950px). Files modified: - src/components/match-tracker/match-tracker.ts - src/pages/app-counter/counter-styles.ts (flex: 1 for cards on desktop)
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.
This commit resolves multiple UI inconsistencies and code quality issues identified during a comprehensive codebase audit. The changes improve maintainability, consistency, and adherence to best practices.
Major Improvements
Style Consistency
Responsive Design
Component Architecture
CSS Modernization
User Experience
Code Cleanup
Files Modified (16)
Testing
Resolves issues with UI consistency, improves maintainability, and brings codebase closer to Lit and Shoelace best practices.