Move bitmap configuration to the left

1whatleytay · Mar 18, 2024 · 670fbbf · 670fbbf
1 parent 8d769e4
commit 670fbbf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/src/components/console/BitmapTab.vue b/src/components/console/BitmapTab.vue
@@ -1,28 +1,9 @@
 <template>
   <div
-    class="text-sm overflow-auto flex whitespace-pre content-start p-2 h-full"
+    class="text-sm overflow-auto flex whitespace-pre content-start p-2 w-full h-full"
   >
-    <button
-      ref="wrapper"
-      @click="focusSelf"
-      @focusin="state.keyboardLive = true"
-      @focusout="state.keyboardLive = false"
-      @keydown="(e) => handleKey(e, false)"
-      @keyup="(e) => handleKey(e, true)"
-      class="outline-none overflow-visible focus:ring-4 border border-neutral-700 rounded h-full shrink-0 max-w-full"
-      :style="{ width: `${correctedWidth}px` }"
-      :class="{ 'mx-auto sm:mx-0': !state.small, 'mx-auto': state.small }"
-    >
-      <canvas
-        ref="canvas"
-        class="w-full h-full bitmap-display rounded"
-        :width="config.width"
-        :height="config.height"
-      />
-    </button>
-
     <div
-      class="p-4 flex flex-col content-center justify-center items-center align-center"
+      class="p-4 flex flex-col content-center mr-auto"
       :class="{ 'sm:block': !state.small }"
     >
       <div class="text-base font-bold mb-4 flex items-center">
@@ -125,6 +106,25 @@
         </div>
       </div>
     </div>
+
+    <button
+      ref="wrapper"
+      @click="focusSelf"
+      @focusin="state.keyboardLive = true"
+      @focusout="state.keyboardLive = false"
+      @keydown="(e) => handleKey(e, false)"
+      @keyup="(e) => handleKey(e, true)"
+      class="outline-none overflow-visible focus:ring-4 border border-neutral-700 rounded h-full shrink-0 max-w-3/4 self-end"
+      :style="{ width: `${correctedWidth}px` }"
+      :class="{ 'mx-auto sm:mx-0': !state.small, 'mx-auto': state.small }"
+    >
+      <canvas
+        ref="canvas"
+        class="w-full h-full bitmap-display rounded"
+        :width="config.width"
+        :height="config.height"
+      />
+    </button>
   </div>
 </template>
 

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -4,6 +4,9 @@ module.exports = {
 
   theme: {
     extend: {
+      maxWidth: {
+        '3/4': '75%'
+      },
       colors: {
         'breakpoint-neutral': '#2b1515',
         'breakpoint-stopped': '#3f3b18',