Download Active Response (#49)

This PR prompts you to save un-previewable file types and adds an option
to save to the response history.

src-web/components/core/HotKeyList.tsx

@@ -1,26 +1,27 @@
+import classNames from 'classnames';
 import React from 'react';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { HotKey } from './HotKey';
 import { HotKeyLabel } from './HotKeyLabel';
-import { HStack, VStack } from './Stacks';
 
 interface Props {
   hotkeys: HotkeyAction[];
   bottomSlot?: React.ReactNode;
+  className?: string;
 }
 
-export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
+export const HotKeyList = ({ hotkeys, bottomSlot, className }: Props) => {
   return (
-    <div className="h-full flex items-center justify-center">
-      <VStack space={2}>
+    <div className={classNames(className, 'h-full flex items-center justify-center')}>
+      <div className="px-4 grid gap-2 grid-cols-[auto_auto]">
         {hotkeys.map((hotkey) => (
-          <HStack key={hotkey} className="grid grid-cols-2">
-            <HotKeyLabel action={hotkey} />
-            <HotKey className="ml-auto" action={hotkey} />
-          </HStack>
+          <>
+            <HotKeyLabel className="truncate" action={hotkey} />
+            <HotKey className="ml-4" action={hotkey} />
+          </>
         ))}
         {bottomSlot}
-      </VStack>
+      </div>
     </div>
   );
 };