jacob1123/forge-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent gear card overflow

Browse Source
This commit is contained in:
Jan Bader
2026-06-16 15:23:30 +02:00
parent df9c9a6cb8
commit 00f4ee6c6b
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+10 -6
View File
@@ -36,6 +36,8 @@ button, input, select, textarea {
color: var(--text); color: var(--text);
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
padding: 0.58rem 0.7rem; padding: 0.58rem 0.7rem;
min-width: 0;
max-width: 100%;
} }
button { button {
@@ -60,6 +62,7 @@ label {
gap: 0.35rem; gap: 0.35rem;
color: var(--muted); color: var(--muted);
font-size: 0.9rem; font-size: 0.9rem;
min-width: 0;
} }
main, .hero { main, .hero {
@@ -193,14 +196,15 @@ h3 { margin-bottom: 0; }
.section-heading { margin: 1.5rem 0 1rem; } .section-heading { margin: 1.5rem 0 1rem; }
.section-heading p { color: var(--muted); } .section-heading p { color: var(--muted); }
.gear-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding-bottom: 3rem; } .gear-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 3rem; }
.gear-card { display: grid; gap: 0.6rem; padding: 0.8rem; } .gear-card { display: grid; gap: 0.55rem; padding: 0.7rem; min-width: 0; overflow: hidden; }
.gear-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .gear-title-row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; align-items: start; }
.gear-title-row h3 { font-size: 1rem; } .gear-title-row h3 { font-size: 1rem; overflow-wrap: anywhere; }
.piece-score { color: var(--accent); font-weight: 800; } .piece-score { color: var(--accent); font-weight: 800; font-size: 0.85rem; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.effects { display: grid; gap: 0.5rem; } .effects { display: grid; gap: 0.5rem; }
.effect-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 0.5rem; align-items: end; } .effect-row { display: grid; grid-template-columns: 1fr; gap: 0.45rem; align-items: end; }
.gear-card .effect-row input[data-effect-value] { width: 100%; }
.cap-hint { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; } .cap-hint { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; }
@media (max-width: 900px) { @media (max-width: 900px) {