Compact form controls

Author: davidmyersdev

assets/css/tailwind.css

@@ -322,7 +322,7 @@
   }
 
   .core-button-shape {
-    @apply p-2 rounded inline-flex gap-3 items-center justify-center;
+    @apply px-2 py-1 rounded inline-flex gap-2 items-center justify-center;
   }
 
   /* utils */
@@ -373,6 +373,6 @@
   }
 
   .sidebar-link {
-    @apply flex items-center justify-between rounded p-2 hover:bg-layer-hover focus:outline-none focus:ring;
+    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus:outline-none focus:ring;
   }
 }

components/CoreInput.vue

@@ -108,7 +108,7 @@ onMounted(() => {
     <label class="cursor-pointer flex flex-col gap-1 group focus-within:cursor-text">
       <small v-if="label">{{ label }}</small>
       <div class="flex -m-0.5 p-0.5 rounded group-focus-within:ring-2 ring-opacity-25">
-        <div class="flex flex-col flex-grow overflow-hidden p-2 relative rounded border border-layer">
+        <div class="flex flex-col flex-grow overflow-hidden px-2 py-1 relative rounded border border-layer">
           <span v-if="private" class="absolute flex inset-0 items-center justify-center z-10 group-focus-within:opacity-0 group-focus-within:-z-10 bg-layer">
             <span class="flex gap-2 items-center">
               <svg height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">