Update index.html

index.html

@@ -664,25 +664,31 @@
         }
         
 .sync-status {
-    position: fixed; /* 位置を完全に固定 */
+    position: absolute;
     bottom: 60px;
     left: 10px;
-    width: 120px; /* 幅を固定 */
-    height: 30px;  /* 高さを固定 */
+    width: 150px; /* 固定幅 */
+    height: 30px; /* 固定高さ */
     background-color: rgba(0, 0, 0, 0.7);
     color: #64ffda;
-    padding: 0 10px; /* パディングは横のみ */
+    padding: 5px 10px;
     border-radius: 3px;
     font-size: 12px;
-    z-index: 9999; /* 他要素より前に */
+    z-index: 5;
     display: flex;
     align-items: center;
-    justify-content: center; /* 中央寄せ */
     gap: 5px;
-    overflow: hidden; /* 内容がはみ出たら隠す */
-    pointer-events: none; /* ドラッグなどの操作を防止したい場合 */
-    user-select: none; /* テキスト選択禁止 */
+
+    white-space: nowrap;        /* 文字の折り返しを防止 */
+    overflow: hidden;           /* 内容がはみ出す場合に隠す */
+    text-overflow: ellipsis;    /* はみ出したテキストに「…」を表示（任意） */
+    user-select: none;          /* テキストの選択を不可にする */
+    pointer-events: none;       /* （任意）クリックなどの操作を無効にしたい場合 */
+
+    /* はみ出してもスクロールバーを出さない */
+    contain: strict;            /* レイアウトの影響を最小限にする */
 }
+
         
         .sync-status button {
             background: none;