Forráskód Böngészése

Beamer: horizontally center vertical worker-name headers in their cells

Wrap the rotated worker-name + sort-indicator in an inline-block span so
the cell's text-align: center positions the vertical text in the middle
of the column instead of pinning it to the right edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa 2 napja
szülő
commit
d2e570e650
2 módosított fájl, 12 hozzáadás és 4 törlés
  1. 8 2
      assets/css/input.css
  2. 4 2
      views/sprints/_task_list.twig

+ 8 - 2
assets/css/input.css

@@ -52,11 +52,17 @@
     /* JS-driven toggle (sprint-planner.js): when the rendered task table
        is wider than the viewport, rotate worker-column headers to save
        horizontal space. Leaves non-worker headers (Task / Owner / Prio
-       / Tot) untouched. */
+       / Tot) untouched. The rotation lives on an inline-block wrapper
+       (.beamer-th-content) rather than the <th> itself, so the cell's
+       `text-align: center` centers the vertical text horizontally
+       inside the cell. */
     .beamer-vertical-headers thead th[data-sort-col^="sw-"] {
+        padding: 0.5rem 0.25rem;
+    }
+    .beamer-vertical-headers thead th[data-sort-col^="sw-"] > .beamer-th-content {
+        display: inline-block;
         writing-mode: vertical-rl;
         transform: rotate(180deg);
-        padding: 0.5rem 0.25rem;
     }
 
     /* Phase 18: per-cell task-assignment status. The colour class lives

+ 4 - 2
views/sprints/_task_list.twig

@@ -156,8 +156,10 @@
                     {% for sw in sprintWorkers %}
                         <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                             data-sort-col="sw-{{ sw.id }}" data-col="sw-{{ sw.id }}">
-                            {{ sw.workerName }}
-                            <span class="sort-ind opacity-30">↕</span>
+                            <span class="beamer-th-content">
+                                {{ sw.workerName }}
+                                <span class="sort-ind opacity-30">↕</span>
+                            </span>
                         </th>
                     {% endfor %}
                 </tr>