Getting there

src/style/toolbar/_layout.scss

@@ -5,16 +5,20 @@
   --toolbar-background-strength: 0;
   --toolbar-divider-space: clamp(6px, 1.8vw, 14px);
   --toolbar-top-max-width: 594px;
+  --vibe-button-hit-size: 64px;
 
   display: grid;
   grid-template-areas:
     'previous controls next'
     'previous divider next'
     'previous buttons next';
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns:
+    var(--vibe-button-hit-size)
+    minmax(0, var(--toolbar-top-max-width))
+    var(--vibe-button-hit-size);
   align-items: stretch;
   justify-content: center;
-  width: 100%;
+  width: fit-content;
   max-width: 100%;
   margin: 0 auto;
   padding-inline: clamp(8px, 1.4vw, 14px);
@@ -85,9 +89,9 @@
     position: relative;
     display: grid;
     place-items: center;
-    width: 52px;
+    width: var(--vibe-button-hit-size);
     height: auto;
-    min-height: 66px;
+    min-height: 72px;
     flex: 0 0 auto;
     padding: 0;
     border-radius: 0;

src/style/toolbar/_responsive.scss

@@ -4,6 +4,7 @@
   @include on-small-screen {
     --toolbar-divider-space: 4px;
     --toolbar-top-max-width: 329px;
+    --vibe-button-hit-size: 44px;
 
     grid-template-areas:
       'previous controls next'
@@ -15,7 +16,7 @@
     row-gap: 0;
 
     > .vibe-button {
-      width: 36px;
+      width: var(--vibe-button-hit-size);
       min-height: 44px;
 
       &::before {