FIX - align memo player content

frontend/src/views/apps/MemosApp.contract.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(new URL('./MemosApp.vue', import.meta.url), 'utf8')
+
+describe('MemosApp layout', () => {
+  it('uses the shared horizontal page gutter in list and detail views', () => {
+    expect(source).toContain(
+      '<SkyScrollArea padded class="memos-page__content">',
+    )
+    expect(source).toContain(
+      '<SkyScrollArea padded class="memo-detail-scroll">',
+    )
+  })
+
+  it('optically centers playback speed labels without moving the controls', () => {
+    expect(source).toContain('<span class="memo-speed-label">')
+    expect(source).toContain('.memo-speed-label {')
+    expect(source).toContain('transform: translateY(1px)')
+  })
+
+  it('centers the skip duration inside a dedicated icon frame', () => {
+    expect(source).toContain('<span class="memo-skip-icon" aria-hidden="true">')
+    expect(source).toContain('<RotateCcw :size="24" />')
+    expect(source).toContain('<RotateCw :size="24" />')
+    expect(source).toContain('.memo-skip-icon small {')
+    expect(source).toContain('place-items: center')
+  })
+})

frontend/src/views/apps/MemosApp.vue

@@ -457,7 +457,7 @@ onBeforeUnmount(() => {
       :title="phone.t('Apps.memos.name')"
     />
 
-    <SkyScrollArea class="memos-page__content">
+    <SkyScrollArea padded class="memos-page__content">
       <div v-if="memos.loading" class="memos-loading">
         <SkySpinner :label="phone.t('Common.loading')" :size="24" />
       </div>
@@ -581,7 +581,7 @@ onBeforeUnmount(() => {
       </template>
     </SkyNavbar>
 
-    <SkyScrollArea class="memo-detail-scroll">
+    <SkyScrollArea padded class="memo-detail-scroll">
       <SkyGlass class="memo-fields-glass" :highlight="false">
         <SkyList nested :dividers="false">
           <SkyField
@@ -648,8 +648,10 @@ onBeforeUnmount(() => {
           :aria-label="phone.t('Apps.memos.skipBack')"
           @click="skipPlayback(-15)"
         >
-          <RotateCcw :size="22" aria-hidden="true" />
-          <small>15</small>
+          <span class="memo-skip-icon" aria-hidden="true">
+            <RotateCcw :size="24" />
+            <small>15</small>
+          </span>
         </SkyButton>
         <SkyButton
           rounded
@@ -678,8 +680,10 @@ onBeforeUnmount(() => {
           :aria-label="phone.t('Apps.memos.skipForward')"
           @click="skipPlayback(15)"
         >
-          <RotateCw :size="22" aria-hidden="true" />
-          <small>15</small>
+          <span class="memo-skip-icon" aria-hidden="true">
+            <RotateCw :size="24" />
+            <small>15</small>
+          </span>
         </SkyButton>
       </SkyGlass>
 
@@ -699,7 +703,7 @@ onBeforeUnmount(() => {
             :active="playbackRate === rate"
             @click="setPlaybackRate(rate)"
           >
-            {{ rate }}×
+            <span class="memo-speed-label">{{ rate }}×</span>
           </SkySegmentedButton>
         </SkySegmented>
       </SkyGlass>
@@ -1062,10 +1066,25 @@ onBeforeUnmount(() => {
   padding: 0;
 }
 
-.memo-player-control small {
+.memo-skip-icon {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  flex: none;
+  place-items: center;
+}
+
+.memo-skip-icon small {
   position: absolute;
-  font-size: 8px;
+  inset: 0;
+  display: grid;
+  padding-top: 1px;
+  font-size: 7px;
   font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  place-items: center;
 }
 
 .memo-player-control--main {
@@ -1090,6 +1109,10 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 
+.memo-speed-label {
+  transform: translateY(1px);
+}
+
 .memo-delete-action {
   min-height: 48px;
   gap: 8px;