diff --git a/ext/src/ui/popup/ReceiverMedia.svelte b/ext/src/ui/popup/ReceiverMedia.svelte
index 8bb1a06..aa7b2cb 100644
--- a/ext/src/ui/popup/ReceiverMedia.svelte
+++ b/ext/src/ui/popup/ReceiverMedia.svelte
@@ -120,7 +120,10 @@
 
         let ret = "";
         if (hours) ret += `${hours}:`;
-        ret += `${date.getUTCMinutes().toString().padStart(2, "0")}:`;
+        ret += `${date
+            .getUTCMinutes()
+            .toString()
+            .padStart(hours ? 2 : 1, "0")}:`;
         ret += date.getUTCSeconds().toString().padStart(2, "0");
         return ret;
     }
@@ -178,44 +181,47 @@
                 <span class="media__current-time">
                     {formatTime(currentTime)}
                 </span>
-                <input
-                    type="range"
-                    class="slider media__seek-bar"
-                    class:slider--indeterminate={status.playerState ===
-                        PlayerState.BUFFERING}
-                    aria-label={_("popupMediaSeek")}
-                    max={status.media.duration ?? currentTime}
-                    value={currentTime}
-                    on:change={ev => {
-                        if (seekHoverPosition) {
-                            ev.preventDefault();
-                            return;
-                        }
-                        dispatch("seek", {
-                            position: ev.currentTarget.valueAsNumber
-                        });
-                    }}
-                    on:click={() => {
-                        if (seekHoverPosition && status.media?.duration) {
+                <div class="media__seek-bar-container">
+                    <input
+                        type="range"
+                        class="slider media__seek-bar"
+                        class:slider--indeterminate={status.playerState ===
+                            PlayerState.BUFFERING}
+                        aria-label={_("popupMediaSeek")}
+                        max={status.media.duration ?? currentTime}
+                        value={currentTime}
+                        on:change={ev => {
+                            if (seekHoverPosition) {
+                                ev.preventDefault();
+                                return;
+                            }
                             dispatch("seek", {
-                                position:
-                                    status.media.duration *
-                                    (seekHoverPosition / 100)
+                                position: ev.currentTarget.valueAsNumber
                             });
-                        }
-                    }}
-                    use:onSeekMouseMove
-                />
-                {#if seekHoverPosition}
-                    <div
-                        class="media__seek-tooltip"
-                        style:--seek-hover-position="{seekHoverPosition}%"
-                    >
-                        {formatTime(
-                            status.media.duration * (seekHoverPosition / 100)
-                        )}
-                    </div>
-                {/if}
+                        }}
+                        on:click={() => {
+                            if (seekHoverPosition && status.media?.duration) {
+                                dispatch("seek", {
+                                    position:
+                                        status.media.duration *
+                                        (seekHoverPosition / 100)
+                                });
+                            }
+                        }}
+                        use:onSeekMouseMove
+                    />
+                    {#if seekHoverPosition}
+                        <div
+                            class="media__seek-tooltip"
+                            style:--seek-hover-position="{seekHoverPosition}%"
+                        >
+                            {formatTime(
+                                status.media.duration *
+                                    (seekHoverPosition / 100)
+                            )}
+                        </div>
+                    {/if}
+                </div>
                 <span class="media__remaining-time">
                     -{formatTime(status.media.duration - currentTime)}
                 </span>
diff --git a/ext/src/ui/popup/styles/index.css b/ext/src/ui/popup/styles/index.css
index 43f3879..44c8172 100755
--- a/ext/src/ui/popup/styles/index.css
+++ b/ext/src/ui/popup/styles/index.css
@@ -193,18 +193,18 @@ body {
 
 .media__seek {
     align-items: center;
-    display: grid;
-    grid-template-columns: min-content auto 1fr auto;
-    grid-template-areas: "live current-time seek-bar remaining-time";
+    display: flex;
+    gap: 10px;
     min-height: 24px;
     width: 100%;
 }
-.media__seek > :not(:last-child) {
-    margin-inline-end: 10px;
+.media__seek-bar-container {
+    display: flex;
+    flex: 1;
+    position: relative;
 }
 .media__seek-bar {
     flex: 1;
-    grid-area: seek-bar;
 }
 .media__seek-tooltip {
     --tooltip-color: var(--button-background);
@@ -213,13 +213,12 @@ body {
     background-color: var(--tooltip-color);
     border-radius: 2px;
     display: flex;
-    grid-area: seek-bar;
-    justify-self: start;
     left: var(--seek-hover-position);
     padding: 2px 5px;
     padding-bottom: 3px;
+    top: 0;
     pointer-events: none;
-    position: relative;
+    position: absolute;
     transform: translate(
         -50%,
         calc(
@@ -238,17 +237,10 @@ body {
     transform: translate(-50%, 100%);
 }
 
-.media__current-time {
-    grid-area: current-time;
-}
-.media__remaining-time {
-    grid-area: remaining-time;
-}
 .media__current-time,
 .media__remaining-time {
     font-variant-numeric: tabular-nums;
     text-align: center;
-    width: 5ch;
 }
 
 .media__live {