From b24aa19ad22f59556fc7bbb63c58836799239588 Mon Sep 17 00:00:00 2001
From: tanaka takashi <isazaka@gmail.com>
Date: Sun, 13 Sep 2026 14:36:46 +0900
Subject: fix(ui): スマホでセッションを削除できるようにする
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

セッション削除ボタンが通常時は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.
---
 src/ollama_web/static/style.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'src/ollama_web/static/style.css')

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);
-- 
cgit v1.2.3