[FEAT] Improve rendering on smaller devices (#58)

Update styling and layout in App and History components

src/App.svelte

@@ -17,12 +17,12 @@
 </svelte:head>
 
 <main
-  class="h-full border-2 rounded-md p-4 overflow-auto"
+  class="h-full border-2 rounded-md p-4 overflow-auto text-xs sm:text-sm md:text-base"
   style={`background-color: ${$theme.background}; color: ${$theme.foreground}; border-color: ${$theme.green};`}
 >
   <History />
 
-  <div class="flex flex-row">
+  <div class="flex flex-col md:flex-row">
     <Ps1 />
 
     <Input />

src/components/History.svelte

@@ -5,15 +5,19 @@
 </script>
 
 {#each $history as { command, outputs }}
-  <div>
-    <div class="flex flex-row">
+  <div style={`color: ${$theme.foreground}`}>
+    <div class="flex flex-col md:flex-row">
       <Ps1 />
 
-      <p style={`color: ${$theme.foreground}`} class="px-3">{command}</p>
+      <div class="flex">
+        <p class="visible md:hidden">❯</p>
+
+        <p class="px-2">{command}</p>
+      </div>
     </div>
 
     {#each outputs as output}
-      <p style={`color: ${$theme.foreground}`} class="whitespace-pre-wrap">
+      <p class="whitespace-pre">
         {output}
       </p>
     {/each}

src/components/Input.svelte

@@ -6,19 +6,10 @@
   import { track } from '../utils/tracking';
 
   let command = '';
-  let isFocused = false;
   let historyIndex = -1;
 
   let input: HTMLInputElement;
 
-  const handleFocus = () => {
-    isFocused = true;
-  };
-
-  const handleBlur = () => {
-    isFocused = false;
-  };
-
   onMount(() => {
     input.focus();
 
@@ -98,53 +89,21 @@
 <svelte:window
   on:click={() => {
     input.focus();
-    isFocused = true;
   }}
 />
 
-<div class="input-container">
+<div class="flex">
+  <p class="visible md:hidden">❯</p>
+
   <input
     id="command-input"
     name="command-input"
     aria-label="Command input"
-    class="w-full px-3 bg-transparent outline-none"
+    class="w-full px-2 bg-transparent outline-none"
     type="text"
     style={`color: ${$theme.foreground}`}
     bind:value={command}
     on:keydown={handleKeyDown}
     bind:this={input}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
   />
-
-  {#if isFocused}
-    <div class="block-caret" style="left: {command.length}ch"></div>
-  {/if}
 </div>
-
-<style>
-  .input-container {
-    position: relative;
-    width: 100%;
-  }
-
-  .input-container input {
-    caret-color: transparent;
-  }
-
-  .input-container .block-caret {
-    position: absolute;
-    top: 2px;
-    width: 10px;
-    height: 1.2em;
-    background-color: currentColor;
-    animation: blink 1s infinite;
-    margin-left: 14px;
-  }
-
-  @keyframes blink {
-    50% {
-      opacity: 0;
-    }
-  }
-</style>