More menu style

ts/routes/reviewer/reviewer-bottom/More.svelte

@@ -3,7 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import DropdownItem from "$lib/components/DropdownItem.svelte";
     import * as tr from "@generated/ftl";
     import MoreSubmenu from "./MoreSubmenu.svelte";
     import MoreItem from "./MoreItem.svelte";
@@ -51,57 +50,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div slot="items" class="dropdown">
         <div class="row">
             <MoreSubmenu bind:showFloating={showFlags}>
-                <DropdownItem
+                <MoreItem
                     slot="button"
                     on:click={() => {
                         showFlags = !showFlags;
                     }}
                 >
                     {tr.studyingFlagCard()}
-                </DropdownItem>
+                </MoreItem>
                 <div slot="items" class="dropdown">
                     {#each flags as flag, i}
-                        <div class="row">
-                            <MoreItem
-                                shortcut={flag.shortcut}
-                                onClick={() => changeFlag(i + 1)}
-                            >
-                                {flag.colour}
-                            </MoreItem>
-                            <span>{flag.shortcut}</span>
-                        </div>
+                        <MoreItem
+                            shortcut={flag.shortcut}
+                            on:click={() => changeFlag(i + 1)}
+                        >
+                            {flag.colour}
+                        </MoreItem>
                     {/each}
                 </div>
             </MoreSubmenu>
         </div>
-        <span></span>
         {#each shortcuts as shortcut}
-            <div class="row">
-                <div>
-                    <MoreItem shortcut={shortcut.shortcut} onClick={shortcut.onClick}>
-                        {shortcut.name}
-                    </MoreItem>
-                </div>
-                <span>
-                    {shortcut.shortcut}
-                </span>
-            </div>
+            <MoreItem shortcut={shortcut.shortcut} on:click={shortcut.onClick}>
+                {shortcut.name}
+            </MoreItem>
         {/each}
     </div>
 </MoreSubmenu>
 
 <style lang="scss">
     div.dropdown {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: baseline;
-
         :global(button) {
             border-radius: 0;
             padding: 0.5em;
             margin: 0;
 
-            // TODO: Hover effects
             &:hover {
                 background: inherit;
                 color: inherit;
@@ -109,10 +92,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    div.row {
-        display: contents;
-    }
-
     button {
         line-height: 18px;
     }

ts/routes/reviewer/reviewer-bottom/MoreItem.svelte

@@ -3,12 +3,32 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import DropdownItem from "$lib/components/DropdownItem.svelte";
-    import Shortcut from "$lib/components/Shortcut.svelte";
-
     export let shortcut: string = "";
-    export let onClick = () => {};
 </script>
 
-<Shortcut keyCombination={shortcut} on:keydown={onClick}></Shortcut>
-<DropdownItem on:click={onClick}><slot /></DropdownItem>
+<div class="row" on:click on:keydown role="button" tabindex="0">
+    <!--<Shortcut keyCombination={shortcut}></Shortcut>-->
+    <slot />
+    <span>{shortcut}</span>
+</div>
+
+<style lang="scss">
+    div.row {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        padding: 0.5em;
+        cursor: pointer;
+        line-height: normal;
+
+        &:hover {
+            background: var(--highlight-bg);
+            color: var(--highlight-fg);
+        }
+
+        span {
+            min-width: 5em;
+            text-align: right;
+        }
+    }
+</style>

ts/routes/reviewer/reviewer-bottom/MoreSubmenu.svelte

@@ -18,3 +18,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </Popover>
     </WithFloating>
 </div>
+
+<style>
+    div :global(.popover) {
+        padding: 0;
+    }
+</style>