diff --git a/static/styles.css b/static/styles.css index 2cd70b9..90b44c8 100644 --- a/static/styles.css +++ b/static/styles.css @@ -852,17 +852,18 @@ button.swatch { width: 36px; height: 36px; } .ach-line { margin: 10px 0 0; } .queue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } .queue .x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0 0 4px; font-size: 11px; } -#top .queue-panel { position: absolute; top: calc(100% + 6px); right: 24px; z-index: 6; width: min(400px, calc(100vw - 32px)); - display: grid; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); +#top .queue-panel { position: absolute; top: calc(100% + 6px); right: 24px; z-index: 6; width: min(440px, calc(100vw - 32px)); + display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } .qp-head, .qp-row, .qp-foot { display: flex; align-items: center; gap: 8px; } .qp-head b { flex: 1; } .qp-head .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; } -.qp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } +.qp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .qp-row .gi { width: 1.4em; height: 1.4em; } .qp-row.now { padding-bottom: 8px; border-bottom: 1px solid var(--line); } .qp-pos { width: 1.2em; text-align: right; color: var(--muted); font-size: 12px; } -.qp-name { flex: 1; min-width: 0; display: grid; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } +.qp-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } +.qp-name > span { display: block; overflow: hidden; text-overflow: ellipsis; } .qp-row input { width: 56px; padding: 3px 6px; font-size: 13px; appearance: textfield; } .qp-foot { justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); } .chip.on { border-color: var(--gold); }