polish search, add workflow loading

javascript/global.css

@@ -174,6 +174,18 @@
   height: 2.5rem
 }
 
+.h-96 {
+  height: 24rem
+}
+
+.h-32 {
+  height: 8rem
+}
+
+.h-full {
+  height: 100%
+}
+
 .max-h-96 {
   max-height: 24rem
 }
@@ -223,6 +235,22 @@
   width: 3rem
 }
 
+.w-96 {
+  width: 24rem
+}
+
+.w-32 {
+  width: 8rem
+}
+
+.w-1\/2 {
+  width: 50%
+}
+
+.w-4\/5 {
+  width: 80%
+}
+
 .max-w-4xl {
   max-width: 56rem
 }
@@ -235,6 +263,14 @@
   max-width: 64rem
 }
 
+.max-w-full {
+  max-width: 100%
+}
+
+.flex-shrink {
+  flex-shrink: 1
+}
+
 .flex-grow {
   flex-grow: 1
 }
@@ -249,6 +285,16 @@
   animation: spin 1s linear infinite
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+}
+
 .cursor-pointer {
   cursor: pointer
 }
@@ -265,6 +311,10 @@
   align-items: center
 }
 
+.justify-end {
+  justify-content: flex-end
+}
+
 .justify-center {
   justify-content: center
 }
@@ -391,6 +441,11 @@
   line-height: 1.75rem
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
 .font-semibold {
   font-weight: 600
 }
@@ -441,6 +496,11 @@
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
@@ -496,4 +556,9 @@
 .hover\:bg-gray-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity))
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
 }