sanpi.mdx: 賛否一覧表の列を整理し、スマホで読みやすくする

安竹洋平・伊藤央・石津はるかの列を議決結果の右にまとめ、水口かずえ・中倉茂和・岡田しんぺいの氏名は外して会派名だけにした。安竹の列はセル全体に色を付ける。スマホでは表を横スクロールにし、議案名は省略表示＋ホバー／タップで全文表示とした。生成側の scripts/parse-sanpi-hyo.py も同じ並び・氏名なしで出力するよう修正した。

1 files changed, 59 insertions, 5 deletions

diff --git a/src/styles/custom.css b/src/styles/custom.css
index ecf2059..ad8966b 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1251,13 +1251,67 @@ h3:hover .heading-anchor {
   border-color: #1565c0;
   background: #10243a;
 }
-/* 安竹洋平の賛否の列を目立たせる */
+/* 安竹洋平の賛否の列を目立たせる。セル全体に色を付ける */
 .sanpi-me {
-  display: inline-block;
-  min-width: 1.3em;
-  padding: 0 0.25em;
-  border-radius: 3px;
   font-weight: 700;
+}
+.sl-markdown-content:has(.sanpi-marker) th:has(.sanpi-me),
+.sl-markdown-content:has(.sanpi-marker) td:has(.sanpi-me) {
   background: var(--sl-color-accent-low);
+}
+.sl-markdown-content:has(.sanpi-marker) th:has(.sanpi-me) {
   color: var(--sl-color-accent-high);
+  font-weight: 700;
+}
+
+/* 賛否一覧の表は、幅が足りなければ横スクロールで全体を見せる */
+.sl-markdown-content:has(.sanpi-marker) table {
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+}
+.sl-markdown-content:has(.sanpi-marker) th,
+.sl-markdown-content:has(.sanpi-marker) td {
+  white-space: nowrap;
+}
+
+/* 議案名は既定では省略し、タップ／クリックで全文を表示する */
+.sanpi-title {
+  display: inline-block;
+  max-width: 14em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-bottom: 1px dotted var(--sl-color-gray-4);
+}
+.sanpi-title:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+td.sanpi-open .sanpi-title {
+  max-width: 42ch;
+  white-space: normal;
+  overflow: visible;
+  border-bottom-color: transparent;
+}
+
+/* ホバー時に議案名の全文をラベルのように表示する */
+.sanpi-tip {
+  position: fixed;
+  z-index: 1000;
+  max-width: min(90vw, 40em);
+  padding: 0.45em 0.7em;
+  border-radius: 6px;
+  background: var(--sl-color-text);
+  color: var(--sl-color-bg);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  font-size: 0.85rem;
+  line-height: 1.55;
+  white-space: normal;
+  pointer-events: none;
+}
+.sanpi-tip[hidden] {
+  display: none;
 }