feat: Added flex-wrap, max-width, and tighter mobile gaps to prevent ho…
- "frontend/src/App.css" GSD-Task: S06/T01
This commit is contained in:
jlightner
parent
f2cc72376c
commit
2e2c89ec50
9 changed files with 392 additions and 2 deletions
|
|
@ -10,5 +10,5 @@ Make the pipeline fully transparent — every LLM call's full prompt and respons
|
|||
| S02 | Debug Payload Viewer — Inline View, Copy, and Export in Admin UI | low | S01 | ✅ | Admin clicks an LLM call event, sees full prompt and response in a readable viewer, copies to clipboard, or downloads as JSON |
|
||||
| S03 | Transcript Folder Watcher — Auto-Ingest Service | medium | — | ✅ | Drop a transcript JSON into the watch folder on ub01 → file is detected, validated, POSTed to /ingest, pipeline triggers automatically |
|
||||
| S04 | Admin UX Audit — Prune, Streamline, and Polish | low | S02 | ✅ | Admin pipeline page is cleaner and more efficient for daily content management. Dead UI elements removed. Workflow improvements visible. |
|
||||
| S05 | Key Moment Card Text Overflow Fix | low | — | ⬜ | Key moment cards with long filenames and timestamp ranges display cleanly — text truncated with ellipsis or wrapped within card bounds, no horizontal bleed |
|
||||
| S05 | Key Moment Card Text Overflow Fix | low | — | ✅ | Key moment cards with long filenames and timestamp ranges display cleanly — text truncated with ellipsis or wrapped within card bounds, no horizontal bleed |
|
||||
| S06 | Mobile Viewport Overflow Fix — Technique Pages and Global Content | low | S05 | ⬜ | Technique page on Galaxy S25 Ultra renders cleanly — body text wraps, tags don't overflow, metadata stays within viewport, no horizontal scroll |
|
||||
|
|
|
|||
76
.gsd/milestones/M007/slices/S05/S05-SUMMARY.md
Normal file
76
.gsd/milestones/M007/slices/S05/S05-SUMMARY.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
id: S05
|
||||
parent: M007
|
||||
milestone: M007
|
||||
provides:
|
||||
- Key moment cards render without text overflow — S06 mobile viewport fix can build on stable card layout
|
||||
requires:
|
||||
[]
|
||||
affects:
|
||||
- S06
|
||||
key_files:
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used word-break: break-word for titles (wrap) vs text-overflow: ellipsis (truncate) since titles are meaningful content
|
||||
patterns_established:
|
||||
- (none)
|
||||
observability_surfaces:
|
||||
- none
|
||||
drill_down_paths:
|
||||
- .gsd/milestones/M007/slices/S05/tasks/T01-SUMMARY.md
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-03-30T19:42:38.680Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# S05: Key Moment Card Text Overflow Fix
|
||||
|
||||
**Fixed key moment card text overflow — long filenames truncate with ellipsis, titles wrap gracefully, no horizontal bleed from sidebar cards.**
|
||||
|
||||
## What Happened
|
||||
|
||||
Applied four targeted CSS property changes to the `.technique-moment*` rules in `frontend/src/App.css`:
|
||||
|
||||
1. `overflow: hidden` on `.technique-moment` — clips any child content that escapes card bounds
|
||||
2. `word-break: break-word` on `.technique-moment__title` — long titles wrap instead of overflowing (wrapping preferred over truncation since titles are meaningful content the user needs to read)
|
||||
3. `max-width: 100%` on `.technique-moment__source` — the source filename now respects actual container width instead of the previous `max-width: 20rem` which could exceed the sidebar's inner width
|
||||
4. `min-width: 0` on `.technique-moment__meta` — required for flex child truncation to work reliably; without this, flex items can refuse to shrink below their content size
|
||||
|
||||
Single task, single file. Frontend builds cleanly.
|
||||
|
||||
## Verification
|
||||
|
||||
Frontend build passes with zero errors (768ms). All four CSS properties confirmed present in the correct rules via grep and manual file inspection. overflow: hidden on .technique-moment (line 1517), word-break: break-word on .technique-moment__title (line 1526), max-width: 100% on .technique-moment__source (line 1548), min-width: 0 on .technique-moment__meta (line 1535).
|
||||
|
||||
## Requirements Advanced
|
||||
|
||||
None.
|
||||
|
||||
## Requirements Validated
|
||||
|
||||
None.
|
||||
|
||||
## New Requirements Surfaced
|
||||
|
||||
None.
|
||||
|
||||
## Requirements Invalidated or Re-scoped
|
||||
|
||||
None.
|
||||
|
||||
## Deviations
|
||||
|
||||
None.
|
||||
|
||||
## Known Limitations
|
||||
|
||||
None.
|
||||
|
||||
## Follow-ups
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/App.css` — Added overflow: hidden, word-break: break-word, max-width: 100%, and min-width: 0 to technique-moment card CSS rules
|
||||
33
.gsd/milestones/M007/slices/S05/S05-UAT.md
Normal file
33
.gsd/milestones/M007/slices/S05/S05-UAT.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# S05: Key Moment Card Text Overflow Fix — UAT
|
||||
|
||||
**Milestone:** M007
|
||||
**Written:** 2026-03-30T19:42:38.680Z
|
||||
|
||||
## UAT: Key Moment Card Text Overflow Fix
|
||||
|
||||
### Preconditions
|
||||
- Chrysopedia web UI running (http://ub01:8096)
|
||||
- At least one technique page exists with key moments that have long source filenames (20+ characters)
|
||||
|
||||
### Test 1: Long filename truncation
|
||||
1. Navigate to a technique page that has key moments with long source video filenames
|
||||
2. Observe the key moment cards in the right sidebar
|
||||
3. **Expected:** Source filename text stays within card bounds, truncated with ellipsis (`...`) if too long. No horizontal scrollbar appears on the sidebar or page.
|
||||
|
||||
### Test 2: Long title wrapping
|
||||
1. Find or create a key moment with a title longer than the card width (~20rem)
|
||||
2. View the technique page containing that moment
|
||||
3. **Expected:** The title text wraps to multiple lines within the card. Full title is readable. No horizontal overflow.
|
||||
|
||||
### Test 3: Timestamp + filename meta row
|
||||
1. View a key moment card that has both a timestamp range (e.g., "01:23:45 – 01:25:00") and a long filename
|
||||
2. **Expected:** The meta row wraps if needed (flex-wrap). Timestamp and filename stay within card bounds. No text overlaps or clips illegibly.
|
||||
|
||||
### Test 4: Narrow viewport
|
||||
1. Resize browser window to ~900px width (technique page sidebar becomes compressed)
|
||||
2. View key moment cards
|
||||
3. **Expected:** Cards adapt — text still truncates/wraps within bounds. No horizontal page scroll caused by card content.
|
||||
|
||||
### Edge Cases
|
||||
- Key moment with no source filename (empty `.technique-moment__source`): card renders normally without blank space issues
|
||||
- Key moment with very short title (1-2 words): no visual regression, card looks normal
|
||||
46
.gsd/milestones/M007/slices/S05/tasks/T01-VERIFY.json
Normal file
46
.gsd/milestones/M007/slices/S05/tasks/T01-VERIFY.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T01",
|
||||
"unitId": "M007/S05/T01",
|
||||
"timestamp": 1774899701156,
|
||||
"passed": true,
|
||||
"discoverySource": "task-plan",
|
||||
"checks": [
|
||||
{
|
||||
"command": "cd frontend",
|
||||
"exitCode": 0,
|
||||
"durationMs": 7,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "echo '---'",
|
||||
"exitCode": 0,
|
||||
"durationMs": 6,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "echo 'overflow: hidden ✓'",
|
||||
"exitCode": 0,
|
||||
"durationMs": 4,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "grep -q 'word-break: break-word' frontend/src/App.css",
|
||||
"exitCode": 0,
|
||||
"durationMs": 6,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "echo 'word-break ✓'",
|
||||
"exitCode": 0,
|
||||
"durationMs": 5,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "echo 'max-width fix ✓'",
|
||||
"exitCode": 0,
|
||||
"durationMs": 6,
|
||||
"verdict": "pass"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +1,24 @@
|
|||
# S06: Mobile Viewport Overflow Fix — Technique Pages and Global Content
|
||||
|
||||
**Goal:** Fix mobile viewport overflow across content pages. Ensure all containers respect viewport width with max-width: 100%, overflow-wrap: break-word, box-sizing: border-box. Focus on technique pages (tag rows, body text, metadata) but audit all pages for the same class of issue.
|
||||
**Goal:** Technique pages and global content render cleanly on mobile viewports (~412px) — no horizontal overflow, tags wrap, metadata stays within bounds.
|
||||
**Demo:** After this: Technique page on Galaxy S25 Ultra renders cleanly — body text wraps, tags don't overflow, metadata stays within viewport, no horizontal scroll
|
||||
|
||||
## Tasks
|
||||
- [x] **T01: Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports** — Add CSS rules to `frontend/src/App.css` that prevent horizontal overflow on narrow viewports (~412px Galaxy S25 Ultra). CSS-only task — no TSX changes.
|
||||
|
||||
**Context:** The technique page has several elements that overflow on mobile:
|
||||
1. `.technique-header__tags` — `display: inline-flex` with no `flex-wrap: wrap`, so multiple topic tags blow out horizontally
|
||||
2. `.technique-header__creator-genres` — rendered in TechniquePage.tsx (line 235) with class `technique-header__creator-genres` but has **zero CSS rules**. Genre pill elements inline without wrapping.
|
||||
3. `.version-switcher__select` (line ~2521) — can be wide with long version text like "v3 — Mar 30, 2026, 02:15 PM"
|
||||
4. `.app-main` (line 199) — has `padding: 0 1.5rem` which is generous for mobile; tighten to 1rem
|
||||
5. `.technique-header__meta` (line ~1408) — `flex-wrap: wrap` already present but gap could be tighter on mobile
|
||||
|
||||
**What already works (do NOT touch):**
|
||||
- `.technique-banner--version` already has `flex-wrap: wrap` ✅
|
||||
- `.technique-chain__flow` already wraps ✅
|
||||
- `.technique-prose__json` already has `overflow-x: auto` ✅
|
||||
- `.technique-moment__source` fixed in S05 ✅
|
||||
- `html, body` have `overflow-x: hidden` ✅
|
||||
- Estimate: 20m
|
||||
- Files: frontend/src/App.css
|
||||
- Verify: cd frontend && npm run build && echo '--- Build OK ---' && cd .. && grep -q 'flex-wrap: wrap' frontend/src/App.css && grep -q 'technique-header__creator-genres' frontend/src/App.css && echo '--- All checks passed ---'
|
||||
|
|
|
|||
75
.gsd/milestones/M007/slices/S06/S06-RESEARCH.md
Normal file
75
.gsd/milestones/M007/slices/S06/S06-RESEARCH.md
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
# S06 Research: Mobile Viewport Overflow Fix — Technique Pages and Global Content
|
||||
|
||||
## Summary
|
||||
|
||||
Straightforward CSS fix — no new technology, no architectural changes. The technique page has several elements that overflow on narrow viewports (~412px CSS width for Galaxy S25 Ultra). The existing 768px breakpoint collapses the two-column grid but doesn't address tag wrapping, metadata spacing, or element sizing. A single CSS-only task in `App.css` targeting the `@media (max-width: 768px)` and/or `@media (max-width: 640px)` blocks.
|
||||
|
||||
## Recommendation
|
||||
|
||||
Single task: add mobile-specific CSS rules for technique page elements that overflow. All work in `frontend/src/App.css`. No TSX changes needed.
|
||||
|
||||
## Implementation Landscape
|
||||
|
||||
### File: `frontend/src/App.css` (3150 lines)
|
||||
|
||||
**Existing breakpoints:**
|
||||
- `@media (max-width: 768px)` at line 1357 — only has technique grid collapse (1fr) and sidebar un-sticky
|
||||
- `@media (max-width: 640px)` at line 812 — admin/queue responsive rules + header stack
|
||||
- `@media (max-width: 640px)` at line 2106 — public page responsive rules (home hero, nav, creators, topics)
|
||||
|
||||
**Overflow sources identified on technique page (target: 412px viewport):**
|
||||
|
||||
1. **`.technique-header__tags` (line 1414)** — `display: inline-flex; gap: 0.25rem` with **no `flex-wrap: wrap`**. Multiple topic tags will blow out horizontally on any narrow viewport. Fix: add `flex-wrap: wrap`.
|
||||
|
||||
2. **`.technique-header__creator-genres`** — rendered in TSX but has **no CSS rule at all**. It's a bare `<span>` containing pill elements. If a creator has multiple genre tags, they'll just inline without wrapping. Fix: add a rule with `display: inline-flex; flex-wrap: wrap; gap: 0.25rem`.
|
||||
|
||||
3. **`.technique-header__meta` (line 1408)** — has `flex-wrap: wrap` ✅, but children (category badge + tags span + quality badge) have no `max-width` constraint. The inline-flex tags span inside this doesn't wrap (see #1). Fixing #1 cascades here.
|
||||
|
||||
4. **`.version-switcher__select` (line 2521)** — could be wide with long "v3 — Mar 30, 2026, 02:15 PM" text. Fix: add `max-width: 100%` or truncation in the 640px breakpoint.
|
||||
|
||||
5. **`.technique-chain__flow` (line 1586)** — monospace font, `display: flex; flex-wrap: wrap` ✅. Already wraps correctly. No fix needed.
|
||||
|
||||
6. **`.technique-prose__json` (line 1484)** — `overflow-x: auto` ✅. Scrolls on overflow. No fix needed.
|
||||
|
||||
7. **`.technique-moment__source` (line 1544)** — already fixed in S05: `max-width: 100%; overflow: hidden; text-overflow: ellipsis` ✅.
|
||||
|
||||
8. **`.technique-page` (line 1338)** — `max-width: 64rem` with no padding. Relies on `.app-main` padding (0 1.5rem). On mobile the 1.5rem side padding is fine but could be reduced to 1rem for more breathing room.
|
||||
|
||||
9. **`.technique-banner--version` (line ~2548)** — `display: flex` with inline button. On narrow viewport the button may push content off-screen. Fix: add `flex-wrap: wrap` in mobile breakpoint.
|
||||
|
||||
**Global elements (already handled):**
|
||||
- `html, body` have `overflow-x: hidden` (line 149) — catches any stray overflow
|
||||
- `.app-header` stacks vertically at 640px ✅
|
||||
- `.app-nav` gaps reduce at 640px ✅
|
||||
- `.app-main` padding: `0 1.5rem` — sufficient for mobile
|
||||
|
||||
### What doesn't need changing:
|
||||
- Grid collapse at 768px already works
|
||||
- Key moment cards (fixed in S05)
|
||||
- Signal chain flow (already wraps)
|
||||
- JSON pre blocks (already scroll)
|
||||
- Search results page (already has flex-wrap)
|
||||
- Home page (already has 640px rules)
|
||||
- Creators/Topics pages (already have 640px rules)
|
||||
|
||||
### Verification approach
|
||||
|
||||
1. `npm run build` — zero TypeScript/build errors
|
||||
2. Grep for all new CSS properties to confirm they're in the right selectors
|
||||
3. Optionally: run dev server → browser emulate Galaxy S25 Ultra (412×915) → navigate to a technique page → verify no horizontal scroll
|
||||
|
||||
### Natural task decomposition
|
||||
|
||||
This is a **single task** — all changes are CSS property additions/modifications in one file (`App.css`). The changes are:
|
||||
|
||||
1. Add `flex-wrap: wrap` to `.technique-header__tags`
|
||||
2. Add `.technique-header__creator-genres` rule with `display: inline-flex; flex-wrap: wrap; gap: 0.25rem`
|
||||
3. In `@media (max-width: 640px)` public section (~line 2106), add:
|
||||
- `.technique-header__title` already shrinks font ✅
|
||||
- `.version-switcher__select { max-width: 10rem; overflow: hidden; text-overflow: ellipsis }`
|
||||
- `.technique-banner--version { flex-wrap: wrap; gap: 0.5rem }`
|
||||
- `.app-main { padding: 0 1rem }` (tighter mobile padding)
|
||||
- `.technique-header__meta { gap: 0.375rem }` (tighter gap)
|
||||
4. Optionally reduce `technique-header__title` font further at 400px if 1.375rem still feels large
|
||||
|
||||
No TSX changes. No new files. No new dependencies.
|
||||
35
.gsd/milestones/M007/slices/S06/tasks/T01-PLAN.md
Normal file
35
.gsd/milestones/M007/slices/S06/tasks/T01-PLAN.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
estimated_steps: 13
|
||||
estimated_files: 1
|
||||
skills_used: []
|
||||
---
|
||||
|
||||
# T01: Add mobile viewport CSS fixes for technique page elements and global content
|
||||
|
||||
Add CSS rules to `frontend/src/App.css` that prevent horizontal overflow on narrow viewports (~412px Galaxy S25 Ultra). CSS-only task — no TSX changes.
|
||||
|
||||
**Context:** The technique page has several elements that overflow on mobile:
|
||||
1. `.technique-header__tags` — `display: inline-flex` with no `flex-wrap: wrap`, so multiple topic tags blow out horizontally
|
||||
2. `.technique-header__creator-genres` — rendered in TechniquePage.tsx (line 235) with class `technique-header__creator-genres` but has **zero CSS rules**. Genre pill elements inline without wrapping.
|
||||
3. `.version-switcher__select` (line ~2521) — can be wide with long version text like "v3 — Mar 30, 2026, 02:15 PM"
|
||||
4. `.app-main` (line 199) — has `padding: 0 1.5rem` which is generous for mobile; tighten to 1rem
|
||||
5. `.technique-header__meta` (line ~1408) — `flex-wrap: wrap` already present but gap could be tighter on mobile
|
||||
|
||||
**What already works (do NOT touch):**
|
||||
- `.technique-banner--version` already has `flex-wrap: wrap` ✅
|
||||
- `.technique-chain__flow` already wraps ✅
|
||||
- `.technique-prose__json` already has `overflow-x: auto` ✅
|
||||
- `.technique-moment__source` fixed in S05 ✅
|
||||
- `html, body` have `overflow-x: hidden` ✅
|
||||
|
||||
## Inputs
|
||||
|
||||
- ``frontend/src/App.css` — existing stylesheet with technique page rules, 640px and 768px breakpoints`
|
||||
|
||||
## Expected Output
|
||||
|
||||
- ``frontend/src/App.css` — updated with mobile viewport overflow fixes: flex-wrap on tags, creator-genres rule, version-switcher max-width, tighter mobile padding and gaps`
|
||||
|
||||
## Verification
|
||||
|
||||
cd frontend && npm run build && echo '--- Build OK ---' && cd .. && grep -q 'flex-wrap: wrap' frontend/src/App.css && grep -q 'technique-header__creator-genres' frontend/src/App.css && echo '--- All checks passed ---'
|
||||
77
.gsd/milestones/M007/slices/S06/tasks/T01-SUMMARY.md
Normal file
77
.gsd/milestones/M007/slices/S06/tasks/T01-SUMMARY.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
id: T01
|
||||
parent: S06
|
||||
milestone: M007
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/App.css"]
|
||||
key_decisions: ["Added flex-wrap at base level (not just mobile media query) so wrapping works at all widths", "Capped version-switcher at 12rem on mobile with text-overflow ellipsis at base"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "npm run build passes (48 modules, 774ms). grep confirms flex-wrap: wrap and technique-header__creator-genres present in App.css."
|
||||
completed_at: 2026-03-30T19:48:27.280Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T01: Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports
|
||||
|
||||
> Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T01
|
||||
parent: S06
|
||||
milestone: M007
|
||||
key_files:
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Added flex-wrap at base level (not just mobile media query) so wrapping works at all widths
|
||||
- Capped version-switcher at 12rem on mobile with text-overflow ellipsis at base
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-03-30T19:48:27.280Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T01: Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports
|
||||
|
||||
**Added flex-wrap, max-width, and tighter mobile gaps to prevent horizontal overflow on ~412px viewports**
|
||||
|
||||
## What Happened
|
||||
|
||||
Applied five CSS changes to frontend/src/App.css: flex-wrap on .technique-header__tags, new .technique-header__creator-genres rule (existed in TSX with zero CSS), max-width + text-overflow on .version-switcher__select, tighter .app-main padding at 640px, and reduced .technique-header__meta gap at 640px. All changes prevent horizontal overflow on Galaxy S25 Ultra width viewports.
|
||||
|
||||
## Verification
|
||||
|
||||
npm run build passes (48 modules, 774ms). grep confirms flex-wrap: wrap and technique-header__creator-genres present in App.css.
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 2000ms |
|
||||
| 2 | `grep -q 'flex-wrap: wrap' frontend/src/App.css` | 0 | ✅ pass | 50ms |
|
||||
| 3 | `grep -q 'technique-header__creator-genres' frontend/src/App.css` | 0 | ✅ pass | 50ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
|
|
@ -1413,6 +1413,13 @@ a.app-footer__repo:hover {
|
|||
|
||||
.technique-header__tags {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.technique-header__creator-genres {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -2163,6 +2170,26 @@ a.app-footer__repo:hover {
|
|||
.topic-subtopic {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.technique-header__meta {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.technique-header__tags {
|
||||
gap: 0.1875rem;
|
||||
}
|
||||
|
||||
.technique-header__creator-genres {
|
||||
gap: 0.1875rem;
|
||||
}
|
||||
|
||||
.version-switcher__select {
|
||||
max-width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Report Issue Modal ─────────────────────────────────────────────────── */
|
||||
|
|
@ -2526,6 +2553,9 @@ a.app-footer__repo:hover {
|
|||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.version-switcher__select:focus {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue