flex-grow instead of flex-1

src/components/Autocomplete.vue

@@ -52,8 +52,8 @@ defineExpose({ handleKeypress })
     class="menu rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
   >
     <li class="flex flex-row" @click="emit('createLink', props.autocompleteText)">
-      <a class="flex-1 px-2 py-1" :class="!activeResult && 'active'">
-        <span class="flex-1">{{ props.autocompleteText }}</span>
+      <a class="flex-grow px-2 py-1" :class="!activeResult && 'active'">
+        <span class="flex-grow">{{ props.autocompleteText }}</span>
         <i class="fas fa-plus-circle ml-auto text-white" />
       </a>
     </li>

src/components/Note.vue

@@ -61,17 +61,17 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
         ></i>
         <input
           type="text"
-          class="flex-1 bg-transparent py-1 outline-none"
+          class="flex-grow bg-transparent py-1 outline-none"
           v-model="noteTitle"
         />
       </template>
     </NoteToolbar>
     <NoteEditor
-      class="h-100 flex-1 overflow-auto"
+      class="flex-grow overflow-auto"
       :note="activeNote"
       @update="updateNoteContent"
       v-if="activeNote"
-    />
+    ></NoteEditor>
     <NoteReferences :references="references" />
     <hr class="my-3" />
     <div class="flex text-sm text-secondary">

src/components/Note/NoteEditor.vue

@@ -163,7 +163,7 @@ const createLink = (link: string) => {
 <template>
   <div class="relative" ref="editorElement">
     <CKEditor
-      class="h-full text-[110%] font-light"
+      class="flex-grow text-[110%] font-light"
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"

src/components/Note/NoteToolbar.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
 <template>
   <div class="mb-2 flex items-center">
     <h1
-      class="mr-2 flex flex-1 items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
+      class="mr-2 flex flex-grow items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
     >
       <slot name="title"></slot>
     </h1>

src/components/Search/SearchBar.vue

@@ -43,7 +43,7 @@ const handleKeydown = (event: KeyboardEvent) => {
 }
 </script>
 <template>
-  <div id="search-container" class="relative h-full flex-1">
+  <div id="search-container" class="relative h-full flex-grow">
     <input
       type="text"
       placeholder="Search for notes"

src/components/Search/SearchResult.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 <template>
   <li class="flex flex-row">
     <a
-      class="flex-1 items-center px-2 py-1"
+      class="flex-grow items-center px-2 py-1"
       @click.stop.prevent="() => emit('goToNote')"
       @mousedown.prevent
       :class="{
@@ -28,7 +28,7 @@ const emit = defineEmits<{
       >
         current
       </span>
-      <span class="flex-1">{{ result.title }}</span>
+      <span class="flex-grow">{{ result.title }}</span>
       <span>{{ formatDate(result.modified) }}</span>
     </a>
   </li>

src/components/TopBar.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
           @click="setActiveNote(rootNote?.id)"
         />
       </div>
-      <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
+      <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
         <button
           class="btn-outline btn-sm btn py-1 text-white"