Skip to content

Commit 8a722f7

Browse files
committed
fix(ui): let the engine and ifdef popovers size to their content
- Both popovers were crushed to their minimum width, wrapping the stale-index warning into word-long lines: an absolutely positioned box treats its anchor's tiny containing block as the available width, so without an explicit width it shrinks instead of growing - They now size to their content up to 360px (or 80vw on a narrow window), where the text wraps at a readable measure
1 parent 0731ba3 commit 8a722f7

1 file changed

Lines changed: 5 additions & 2 deletions

File tree

static/css/main.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ input[type=checkbox]{cursor:pointer;margin-right:2px}
213213
真偽を反転するたびエディタのグレーアウトが変わるのを見る機能だから)。
214214
ヘッダに残るのはこのボタン1個で、幅の剛体だった 200px 入力欄は消えた。 */
215215
#ifdef-btn.on{color:#c8a84b}
216-
#ifdef-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-popover-low);background:#252526;border:1px solid #454545;border-radius:4px;padding:8px;min-width:230px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
216+
#ifdef-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-popover-low);background:#252526;border:1px solid #454545;border-radius:4px;padding:8px;width:max-content;min-width:240px;max-width:min(360px,80vw);box-shadow:0 4px 12px rgba(0,0,0,0.4)}
217217
.ifdef-pop-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
218218
.ifdef-pop-close{background:none;border:none;color:#666;cursor:pointer;font-size:11px;padding:0 2px}
219219
.ifdef-pop-close:hover{color:#ccc}
@@ -998,7 +998,10 @@ body.search-mode #root-chip{min-width:0}
998998
#gtags-engine-label{padding:2px 6px;border-radius:3px}
999999
#gtags-engine-label:hover{background:#333;color:#ccc !important}
10001000
/* ===== GNU Global ポップオーバー ===== */
1001-
#gtags-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-popover-low);background:#252526;border:1px solid #454545;border-radius:4px;padding:8px;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
1001+
/* 絶対配置の shrink-to-fit は基準ブロック(小さなラベルの箱)を利用可能幅と
1002+
みなすので、指定が無いと min-width まで潰れて全文が細切れに折り返される。
1003+
中身に合わせて広がり、上限で折り返す。 */
1004+
#gtags-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-popover-low);background:#252526;border:1px solid #454545;border-radius:4px;padding:8px;width:max-content;min-width:240px;max-width:min(360px,80vw);box-shadow:0 4px 12px rgba(0,0,0,0.4)}
10021005
.gtags-pop-title{font-size:11px;color:#888;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #333}
10031006
.gtags-pop-row{display:flex;align-items:center;gap:6px;padding:4px 2px;cursor:pointer;color:#ccc;font-size:12px}
10041007
.gtags-pop-row:hover{color:#fff}

0 commit comments

Comments
 (0)