anvilsign in

collin/mahjong · f8f3a70c

Fix the settings panel collapsing to a sliver, and size it for a table

Collin Richards · 2026-08-07 09:30 UTC · f8f3a70cc3230505e3d54515563a240cf218a4e7 · parent 51bd1b32 · browse files

modifiedsrc/styles.css+49 −36
⋯ 1005 unchanged lines
10061006 padding: 20px;
10071007 }
10081008 .settings {
1009- width: min(880px, 100%);
1009+ width: min(1180px, 100%);
10101010 max-height: 100%;
10111011 display: flex;
10121012 flex-direction: column;
⋯ 1 unchanged line
10141014 border: 1px solid rgba(217, 180, 92, 0.4);
10151015 border-radius: 14px;
10161016 box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
1017- padding: 12px 20px 16px;
1017+ padding: 16px 28px 22px;
10181018 }
10191019 .settings-head {
10201020 display: flex;
⋯ 1 unchanged line
10221022 justify-content: space-between;
10231023 gap: 16px;
10241024 flex: none;
1025- padding-bottom: 8px;
1025+ padding-bottom: 12px;
10261026 border-bottom: 1px solid rgba(246, 240, 226, 0.12);
10271027 }
10281028 .settings-head h3 {
10291029 margin: 0;
1030- font-size: 17px;
1030+ font-size: 22px;
10311031 font-weight: 400;
10321032 letter-spacing: 0.08em;
10331033 color: var(--gold);
⋯ 3 unchanged lines
10371037 gap: 10px;
10381038 }
10391039 .settings-head .btn {
1040- min-height: 36px;
1041- padding: 2px 16px;
1042- font-size: 14px;
1040+ min-height: 46px;
1041+ padding: 2px 22px;
1042+ font-size: 17px;
10431043 }
10441044 .settings-body {
1045- flex: 1 1 0;
1045+ /* `1 1 auto`, not `1 1 0`: the panel's own height comes from this content,
1046+ so a zero basis collapses the pair of them to nothing. `max-height` on the
1047+ panel is what brings the scrollbar back at the other end. */
1048+ flex: 1 1 auto;
10461049 min-height: 0;
10471050 overflow-y: auto;
10481051 scrollbar-width: thin;
1049- padding-top: 10px;
1050- display: grid;
1051- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1052- gap: 4px 28px;
1053- align-content: start;
1052+ padding-top: 14px;
1053+ /* Columns rather than a grid: grid rows would size to the tallest section
1054+ and leave the shorter one padded with air, which is what pushed the last
1055+ house rule off the bottom. */
1056+ columns: 2;
1057+ column-gap: 44px;
10541058 }
10551059 .settings-body section {
1056- margin-bottom: 12px;
1060+ break-inside: avoid;
1061+ margin-bottom: 22px;
10571062 }
10581063 .settings-body h4 {
1059- margin: 0 0 6px;
1060- font-size: 13px;
1064+ margin: 0 0 10px;
1065+ font-size: 16px;
10611066 font-weight: 400;
10621067 color: var(--gold);
10631068 letter-spacing: 0.06em;
10641069 }
10651070 .settings-body h4 em {
10661071 font-style: normal;
1067- font-size: 9px;
1072+ font-size: 11px;
10681073 letter-spacing: 0.12em;
10691074 text-transform: uppercase;
10701075 opacity: 0.55;
⋯ 2 unchanged lines
10731078 .settings .field {
10741079 display: flex;
10751080 align-items: center;
1076- gap: 10px;
1077- padding: 3px 0;
1081+ gap: 14px;
1082+ padding: 5px 0;
10781083 }
10791084 .settings .f-label {
10801085 display: flex;
10811086 align-items: baseline;
1082- gap: 5px;
1083- font-size: 13px;
1084- min-width: 92px;
1087+ gap: 6px;
1088+ font-size: 16px;
1089+ /* Wide enough for 起始籌碼 STARTING CHIPS, so every input in a section
1090+ starts at the same place. */
1091+ min-width: 196px;
10851092 opacity: 0.85;
10861093 }
1094+/* ...except the player rows, which are labelled 1–4 and need no such room. */
1095+.settings .names .f-label {
1096+ min-width: 26px;
1097+}
10871098 .settings .f-label em {
10881099 font-style: normal;
1089- font-size: 9px;
1100+ font-size: 11px;
10901101 letter-spacing: 0.1em;
10911102 text-transform: uppercase;
10921103 opacity: 0.55;
⋯ 4 unchanged lines
10971108 flex: 1 1 0;
10981109 min-width: 0;
10991110 font-family: inherit;
1100- font-size: 15px;
1111+ font-size: 18px;
11011112 color: var(--ivory);
11021113 background: rgba(0, 0, 0, 0.28);
11031114 border: 1px solid rgba(246, 240, 226, 0.25);
1104- border-radius: 7px;
1105- padding: 7px 10px;
1115+ border-radius: 8px;
1116+ padding: 11px 14px;
1117+ min-height: 48px;
11061118 user-select: text;
11071119 }
11081120 .settings input:focus {
⋯ 1 unchanged line
11101122 border-color: rgba(217, 180, 92, 0.8);
11111123 }
11121124 .settings input[type='number'] {
1113- max-width: 110px;
1125+ max-width: 150px;
11141126 }
11151127 .settings input[type='range'] {
11161128 flex: 1 1 0;
1129+ height: 34px;
11171130 accent-color: var(--gold);
11181131 }
11191132 .settings input:disabled {
⋯ 2 unchanged lines
11221135 .settings .switch {
11231136 display: grid;
11241137 grid-template-columns: auto 1fr;
1125- gap: 2px 10px;
1138+ gap: 3px 14px;
11261139 align-items: center;
1127- padding: 5px 0;
1140+ padding: 9px 0;
11281141 cursor: pointer;
11291142 }
11301143 .settings .switch input {
1131- width: 20px;
1132- height: 20px;
1144+ width: 26px;
1145+ height: 26px;
11331146 accent-color: var(--gold);
11341147 cursor: pointer;
11351148 }
11361149 .settings .sw-name {
11371150 display: flex;
11381151 align-items: baseline;
1139- gap: 6px;
1140- font-size: 14px;
1152+ gap: 8px;
1153+ font-size: 17px;
11411154 }
11421155 .settings .sw-name em {
11431156 font-style: normal;
1144- font-size: 9px;
1157+ font-size: 11px;
11451158 letter-spacing: 0.1em;
11461159 text-transform: uppercase;
11471160 opacity: 0.55;
11481161 }
11491162 .settings .note {
11501163 grid-column: 2;
1151- font-size: 11px;
1152- line-height: 1.35;
1164+ font-size: 13px;
1165+ line-height: 1.4;
11531166 opacity: 0.55;
11541167 }
11551168 .settings .switch.dead {
⋯ 9 unchanged lines