fix(ui): shortcuts modal without table and bottom lines

front/src/components/ShortcutsModal.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 
 const model = defineModel<boolean>()
 
@@ -103,42 +104,47 @@ const player = computed(() => [
     :title="t('components.ShortcutsModal.header.modal')"
     v-model="model">
     <section class="scrolling content">
-      <Layout flex>
-        <div class="column" :class="$style.withPadding">
-          <table
+      <Layout columns style="column-gap: 64px; column-rule: none;">
+        <div class="column">
+          <div
             v-for="section in player"
             :key="section.title"
-            class="ui compact basic table"
+            style="break-inside: avoid;"
           >
-            <h3>{{ section.title }}</h3>
-            <tbody>
-              <tr
+            <h3 style="margin-top: 0px;">{{ section.title }}</h3>
+            <layout stack no-gap>
+              <div
                 v-for="shortcut in section.shortcuts"
                 :key="shortcut.summary"
               >
-                <td :class="$style.description">{{ shortcut.summary }}</td>
-                <td>          <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="column" :class="$style.withPadding">
-          <table
+                <layout flex>
+                  <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
+                  <Spacer grow />
+                  <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button>
+                </layout>
+                <hr />
+              </div>
+            </layout>
+          </div>
+          <div
             v-for="section in general"
             :key="section.title"
-            class="ui compact basic table"
           >
             <h3>{{ section.title }}</h3>
-            <tbody>
-              <tr
+            <layout stack no-gap>
+              <div
                 v-for="shortcut in section.shortcuts"
                 :key="shortcut.summary"
               >
-                <td :class="$style.description">{{ shortcut.summary }}</td>
-                <td>          <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button></td>
-              </tr>
-            </tbody>
-          </table>
+                <layout flex>
+                  <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
+                  <Spacer grow />
+                  <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button>
+                </layout>
+                <hr />
+              </div>
+            </layout>
+          </div>
         </div>
       </Layout>
     </section>