add default ... for ClientSearch

components/ClientSearch.vue

@@ -1,20 +1,14 @@
 <template>
   <section class="client-search">
     <div class="label">Client</div>
-    <div class="input">
-      <input type="text" placeholder="..." v-model="inputValue" />
-    </div>
+    <pre class="data">...</pre>
   </section>
 </template>
 
 <script>
 export default {
   name: "ClientSearch",
-  data() {
-    return {
-      inputValue: ""
-    };
-  }
+
 };
 </script>
 
@@ -43,20 +37,28 @@ export default {
   color: #FFFFFF;
 }
 
-.input {
-  display: flex;
-  align-items: center;
-  gap: 0.625em;
-  flex: 0;
-  height: 1.875em;
-  background: #212121;
-  box-shadow: inset 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.25);
-  border-radius: 0.3125em;
-  min-width: 8rem; 
-  overflow: hidden;
-  padding-right: 0.8rem;
-  padding-left: 0.8rem
-}
+
+  /* flex: 0;
+  height: 1.875em; */
+  /* min-width: 1.875em;
+  width: fit-content; 
+  overflow: hidden; */
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+
+    /* gap: 0.625em;
+    flex: 0; */
+  }
 
 .input input {
   flex: 1;