diff --git a/front/src/ui/modals/Shortcuts.vue b/front/src/ui/modals/Shortcuts.vue
index 00edd025a..3c9523685 100644
--- a/front/src/ui/modals/Shortcuts.vue
+++ b/front/src/ui/modals/Shortcuts.vue
@@ -119,11 +119,10 @@ const player = computed(() => [
     :title="t('components.ShortcutsModal.header.modal')"
     v-model="isOpen"
   >
-    <Layout columns style="column-gap: 64px; column-rule: none;">
+    <Layout grid="auto / repeat(auto-fit, minmax(min-content, max(calc(50% - 16px), 367px)))">
       <div
         v-for="section in player"
         :key="section.title"
-        style="break-inside: avoid;"
       >
         <h3 style="margin-top: 0px;">{{ section.title }}</h3>
         <layout stack no-gap>
@@ -134,7 +133,7 @@ const player = computed(() => [
             <layout flex>
               <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
               <Spacer grow />
-              <Button style="pointer-events:none;" width="auto">{{ shortcut.key }}</Button>
+              <Button style="pointer-events:none;" min-content>{{ shortcut.key }}</Button>
             </layout>
             <hr />
           </template>
@@ -144,7 +143,7 @@ const player = computed(() => [
         v-for="section in general"
         :key="section.title"
       >
-        <h3>{{ section.title }}</h3>
+        <h3 style="margin-top: 0px;">{{ section.title }}</h3>
         <layout stack no-gap>
           <div
             v-for="shortcut in section.shortcuts"
@@ -153,7 +152,7 @@ const player = computed(() => [
             <layout flex>
               <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
               <Spacer grow />
-              <Button style="pointer-events:none;" width="auto">{{ shortcut.key }}</Button>
+              <Button style="pointer-events:none;" min-content>{{ shortcut.key }}</Button>
             </layout>
             <hr />
           </div>