diff options
| author | tanaka takashi <isazaka@gmail.com> | 2026-09-13 14:36:46 +0900 |
|---|---|---|
| committer | tanaka takashi <isazaka@gmail.com> | 2026-09-13 14:36:46 +0900 |
| commit | b24aa19ad22f59556fc7bbb63c58836799239588 (patch) | |
| tree | 0a5cee4357f864fc73cba37d7cd2eb23d5266385 /src/ollama_web/static/style.css | |
| parent | f2d24cb7d437ad099291262d7c1b021809cd66ae (diff) | |
fix(ui): スマホでセッションを削除できるようにする
セッション削除ボタンが通常時はdisplay:noneで、li:hover時だけ表示されていたため、持続的なhoverを持たないスマートフォンでは安定して操作できなかった。モバイル幅、hover非対応、coarse pointer環境ではボタンを常時表示し、44x44pxのタップ領域とtouch-actionを設定する。
表示修正後もタップ後の処理がネイティブwindow.confirmと複数のclickリスナーに依存していたため、削除とセッション選択をsession-list上の単一イベント委譲へ統合する。削除ボタンを先に判定して行選択とサイドバー閉鎖へ伝播しないようにした。
ネイティブ確認ダイアログを既存modalスタイルに沿ったアプリ内確認ダイアログへ置き換える。キャンセル、背景タップ、Escape、フォーカス復帰に対応し、DELETE実行中の二重送信を防止する。通信失敗はネイティブalertではなくダイアログ内のaria-live領域へ表示する。
削除ボタンへbutton typeとaria-labelを明示し、確認ダイアログへdialog semanticsと日英のキャンセル文言を追加する。CHANGELOGと、タッチ向けCSSのカスケード順・サイズ・ネイティブconfirm非依存を確認する回帰テストも更新する。
Validation: 150 tests passed; ruff check passed; node --check src/ollama_web/static/app.js passed; git diff --check passed.
Diffstat (limited to 'src/ollama_web/static/style.css')
| -rw-r--r-- | src/ollama_web/static/style.css | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/src/ollama_web/static/style.css b/src/ollama_web/static/style.css index 2b6d4bc..beb65d1 100644 --- a/src/ollama_web/static/style.css +++ b/src/ollama_web/static/style.css @@ -282,6 +282,20 @@ body { display: inline; } +/* Touch devices cannot reliably reveal hover-only controls. Keep the action + visible and large enough to tap without changing the desktop interaction. */ +@media (max-width: 768px), (hover: none), (pointer: coarse) { + #session-list li .delete { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 44px; + min-height: 44px; + flex-shrink: 0; + touch-action: manipulation; + } +} + #session-list li.empty { color: var(--muted); font-size: 13px; @@ -692,6 +706,16 @@ button#send-btn { padding: 0 20px; } flex-direction: column; } +.confirm-modal-content { + width: min(420px, 100%); +} + +.delete-session-status { + min-height: 20px; + color: var(--danger); + font-size: 13px; +} + .modal-header { display: flex; align-items: center; @@ -755,6 +779,12 @@ button#send-btn { padding: 0 20px; } background: transparent; } +.modal-footer button.danger { + background: var(--danger); + border-color: var(--danger); + color: #fff; +} + .mcp-server-card { background: var(--bg); border: 1px solid var(--border); |
