Brummel/doctate
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix player seek bar alignment

Browse Source 
Adjust the `justify-content` of the player to align items to the right,
and limit the `max-width` of the seek bar to prevent overflow and
improve layout on smaller screens.
This commit is contained in:
Brummel
2026-04-20 15:12:19 +02:00
parent 75c89c132f
commit 424330aad4
1 changed files with 2 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/case_recordings.html
+2 -3
View File
@@ -20,7 +20,7 @@ header form { margin: 0; }
.pending { color: #888; font-style: italic; margin-top: 0.5em; } .pending { color: #888; font-style: italic; margin-top: 0.5em; }
.failed { color: #b00; font-weight: bold; margin-top: 0.5em; } .failed { color: #b00; font-weight: bold; margin-top: 0.5em; }
.player { display: inline-flex; align-items: center; gap: 0.5em; flex: 1; min-width: 20em; } .player { display: inline-flex; align-items: center; gap: 0.5em; flex: 1; justify-content: flex-end; }
.player .play { .player .play {
position: relative; position: relative;
width: 2em; height: 2em; width: 2em; height: 2em;
@@ -55,7 +55,7 @@ header form { margin: 0; }
background: #333; background: #333;
transform: translate(2px, -50%); transform: translate(2px, -50%);
} }
.player .seek { flex: 1; cursor: pointer; } .player .seek { flex: 1; max-width: 6em; cursor: pointer; }
.player .time { font-family: monospace; font-size: 0.85em; color: #555; min-width: 5.5em; text-align: right; } .player .time { font-family: monospace; font-size: 0.85em; color: #555; min-width: 5.5em; text-align: right; }
.header-right { display: flex; align-items: center; gap: 0.8em; } .header-right { display: flex; align-items: center; gap: 0.8em; }
@@ -89,7 +89,6 @@ try {
<h1>Aufnahmen</h1> <h1>Aufnahmen</h1>
{% if is_admin %}<div class="meta admin-only">{{ case_id }}</div>{% endif %} {% if is_admin %}<div class="meta admin-only">{{ case_id }}</div>{% endif %}
<h2>Aufnahmen ({{ recordings.len() }})</h2>
{% for rec in recordings %} {% for rec in recordings %}
<div class="recording{% if rec.failed %} failed-row{% endif %}"> <div class="recording{% if rec.failed %} failed-row{% endif %}">
<div class="recording-head"> <div class="recording-head">