Repository navigation
feat(tools): restructure tool category pages to single-column full-width layout - #4
Merged
Merged
Conversation
Deploying gemmology-dev with
|
| Latest commit: |
a6f211f
|
| Status: | 🚫 Build failed. |
…dth layout Replace the 2-column accordion grid with a single-column, all-expanded layout across all six tool category pages. Each section now uses a sticky colored-accent header via the new ToolSection layout primitive. Layout changes by category: - Measurement (emerald) and Conversion (blue) switch from CalculatorCard accordion to ToolSection wrappers - Optical (purple): DichroscopeResults uses horizontal filter bar with a 3-column gem card grid - Lab (rose): adopts ToolSection container - Identification (amber): GemComparison gets pill selectors with a full-width comparison table; HardnessReference arranges Mohs scale and searchable lookup side-by-side; FractureCleavageGuide uses a 4-column fracture grid and full-width cleavage table - Advanced (cyan): TreatmentDetection uses a 4-column treatment-types grid with a full-width detection table New primitive: - src/components/ui/ToolSection.tsx — reusable section wrapper with configurable accent color and sticky header Refs: feature/gemmological-tools-expansion
Bissbert
force-pushed
the
feature/gemmological-tools-expansion
branch
from
January 28, 2026 04:22
89017dc to
a6f211f
Compare
Bissbert
added a commit
that referenced
this pull request
May 11, 2026
- QuestionNav: Add horizontal scroll with snap points on mobile, hide legend - ExamTimer: Add responsive sizing (smaller padding/font on mobile), hide icon on small screens - Calculator: Replace horizontal scroll tabs with dropdown select on mobile
Bissbert
added a commit
that referenced
this pull request
May 11, 2026
…dth layout (#4) Replace the 2-column accordion grid with a single-column, all-expanded layout across all six tool category pages. Each section now uses a sticky colored-accent header via the new ToolSection layout primitive. Layout changes by category: - Measurement (emerald) and Conversion (blue) switch from CalculatorCard accordion to ToolSection wrappers - Optical (purple): DichroscopeResults uses horizontal filter bar with a 3-column gem card grid - Lab (rose): adopts ToolSection container - Identification (amber): GemComparison gets pill selectors with a full-width comparison table; HardnessReference arranges Mohs scale and searchable lookup side-by-side; FractureCleavageGuide uses a 4-column fracture grid and full-width cleavage table - Advanced (cyan): TreatmentDetection uses a 4-column treatment-types grid with a full-width detection table New primitive: - src/components/ui/ToolSection.tsx — reusable section wrapper with configurable accent color and sticky header Refs: feature/gemmological-tools-expansion
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.
Summary
ToolSection.tsx, a reusable layout primitive with a sticky colored-accent headerAccent color mapping
Layout details
Test plan
npm run buildpasses with zero errors