From e08603f43ed886c46b4bc9f95539d899d006d32a Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Fri, 12 Jul 2024 01:15:51 +0200
Subject: [PATCH] Update snapshots

---
 .../__snapshots__/BottomMenu.test.ts.snap     | 352 ++++++---------
 .../menu/__snapshots__/TopMenu.test.ts.snap   |  73 +--
 .../__snapshots__/TableList.test.ts.snap      | 204 +++------
 .../__snapshots__/TablesDrawer.test.ts.snap   |  73 +--
 .../__snapshots__/DefaultLayout.test.ts.snap  | 425 ++++++------------
 .../index/__snapshots__/Page.test.ts.snap     | 425 ++++++------------
 .../room/__snapshots__/Page.test.ts.snap      | 425 ++++++------------
 7 files changed, 666 insertions(+), 1311 deletions(-)

diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
index 9e8fe816a7..4b33184c1c 100644
--- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
@@ -9,199 +9,35 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
   >
     
     
-    <div
-      class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5"
-      data-v-96a196cc=""
+    
+    <nav
+      class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4 d-md-none"
+      data-v-cf2c9067=""
+      style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
     >
-      
-      <nav
-        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
-        data-v-cf2c9067=""
-        style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
+      <!---->
+      <!---->
+      <div
+        class="v-navigation-drawer__content"
       >
-        <!---->
-        <!---->
+        
         <div
-          class="v-navigation-drawer__content"
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
+          data-v-cf2c9067=""
         >
-          
-          <div
-            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
-            data-v-cf2c9067=""
-          >
-            <!---->
-            <div
-              class="v-input__control"
-            >
-              
-              <div
-                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
-              >
-                <div
-                  class="v-field__overlay"
-                />
-                <div
-                  class="v-field__loader"
-                >
-                  <div
-                    aria-hidden="true"
-                    aria-valuemax="100"
-                    aria-valuemin="0"
-                    class="v-progress-linear v-theme--light v-locale--is-ltr"
-                    role="progressbar"
-                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                  >
-                    <!---->
-                    <div
-                      class="v-progress-linear__background"
-                      style="width: 100%;"
-                    />
-                    <transition-stub
-                      appear="false"
-                      css="true"
-                      name="fade-transition"
-                      persisted="false"
-                    >
-                      <div
-                        class="v-progress-linear__indeterminate"
-                      >
-                        
-                        <div
-                          class="v-progress-linear__indeterminate long"
-                        />
-                        <div
-                          class="v-progress-linear__indeterminate short"
-                        />
-                        
-                      </div>
-                    </transition-stub>
-                    <!---->
-                  </div>
-                </div>
-                <div
-                  class="v-field__prepend-inner"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
-                  />
-                  <!---->
-                </div>
-                <div
-                  class="v-field__field"
-                  data-no-activator=""
-                >
-                  <label
-                    aria-hidden="true"
-                    class="v-label v-field-label v-field-label--floating"
-                    for="input-1"
-                  >
-                    <!---->
-                    
-                    $t('tablesDrawer.searchPlaceholder')
-                    
-                  </label>
-                  <label
-                    class="v-label v-field-label"
-                    for="input-1"
-                  >
-                    <!---->
-                    
-                    $t('tablesDrawer.searchPlaceholder')
-                    
-                  </label>
-                  
-                  
-                  <!---->
-                  <input
-                    aria-describedby="input-1-messages"
-                    class="v-field__input"
-                    id="input-1"
-                    size="1"
-                    type="text"
-                  />
-                  <!---->
-                  
-                  
-                </div>
-                <transition-stub
-                  appear="false"
-                  css="true"
-                  name="expand-x-transition"
-                  persisted="false"
-                >
-                  <div
-                    class="v-field__clearable"
-                    style="display: none;"
-                  >
-                    
-                    <i
-                      aria-hidden="false"
-                      aria-label="$vuetify.input.clear"
-                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                      role="button"
-                      tabindex="0"
-                    />
-                    
-                  </div>
-                </transition-stub>
-                <div
-                  class="v-field__append-inner"
-                >
-                  <!---->
-                  <!---->
-                </div>
-                <div
-                  class="v-field__outline"
-                >
-                  <!---->
-                  <!---->
-                </div>
-              </div>
-              
-            </div>
-            <!---->
-            <div
-              class="v-input__details"
-            >
-              <transition-group-stub
-                appear="false"
-                aria-live="polite"
-                class="v-messages"
-                css="true"
-                id="input-1-messages"
-                name="slide-y-transition"
-                persisted="false"
-                role="alert"
-                tag="div"
-              >
-                <!---->
-              </transition-group-stub>
-              <!---->
-            </div>
-          </div>
+          <!---->
           <div
-            class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-            data-v-cf2c9067=""
-            role="listbox"
-            tabindex="0"
+            class="v-input__control"
           >
             
-            <h2
-              class="mx-4"
-              data-v-cf2c9067=""
-            >
-              $t('tablesDrawer.header')
-            </h2>
             <div
-              class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-              data-v-cf2c9067=""
-              data-v-de37061b=""
-              style="width: 400px;"
+              class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
             >
-              <!---->
               <div
-                class="v-card__loader"
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
               >
                 <div
                   aria-hidden="true"
@@ -238,45 +74,141 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
                   <!---->
                 </div>
               </div>
-              <!---->
-              <!---->
-              
               <div
-                class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-de37061b=""
-                role="listbox"
-                tabindex="0"
+                class="v-field__prepend-inner"
+              >
+                <i
+                  aria-hidden="true"
+                  class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                />
+                <!---->
+              </div>
+              <div
+                class="v-field__field"
+                data-no-activator=""
               >
+                <label
+                  aria-hidden="true"
+                  class="v-label v-field-label v-field-label--floating"
+                  for="input-1"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
+                <label
+                  class="v-label v-field-label"
+                  for="input-1"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
                 
                 
+                <!---->
+                <input
+                  aria-describedby="input-1-messages"
+                  class="v-field__input"
+                  id="input-1"
+                  size="1"
+                  type="text"
+                />
+                <!---->
                 
                 
               </div>
-              
-              <!---->
-              
-              <!---->
-              <span
-                class="v-card__underlay"
-              />
-              
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
+                >
+                  
+                  <i
+                    aria-hidden="false"
+                    aria-label="$vuetify.input.clear"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
+                    tabindex="0"
+                  />
+                  
+                </div>
+              </transition-stub>
+              <div
+                class="v-field__append-inner"
+              >
+                <!---->
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                <!---->
+                <!---->
+              </div>
             </div>
             
           </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-1-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div
+          class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
+          data-v-cf2c9067=""
+          role="listbox"
+          tabindex="0"
+        >
+          
+          <h2
+            class="header mb-4"
+            data-v-cf2c9067=""
+          >
+            $t('tablesDrawer.header')
+          </h2>
+          <div
+            data-v-cf2c9067=""
+          >
+            $t('tablesDrawer.noTables')
+          </div>
           
         </div>
-        <!---->
-      </nav>
-      <transition-stub
-        appear="false"
-        css="true"
-        name="fade-transition"
-        persisted="false"
-      >
-        <!---->
-      </transition-stub>
-      
-    </div>
+        
+      </div>
+      <!---->
+    </nav>
+    <transition-stub
+      appear="false"
+      css="true"
+      name="fade-transition"
+      persisted="false"
+    >
+      <!---->
+    </transition-stub>
+    
     <div
       class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
       data-v-96a196cc=""
diff --git a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
index d7a9b215c8..4b37d1c695 100644
--- a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
@@ -750,7 +750,7 @@ exports[`TopMenu > renders 1`] = `
     </div>
     
     <nav
-      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
       data-v-cf2c9067=""
       style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
     >
@@ -761,7 +761,7 @@ exports[`TopMenu > renders 1`] = `
       >
         
         <div
-          class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
           data-v-cf2c9067=""
         >
           <!---->
@@ -770,7 +770,7 @@ exports[`TopMenu > renders 1`] = `
           >
             
             <div
-              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
             >
               <div
                 class="v-field__overlay"
@@ -923,78 +923,15 @@ exports[`TopMenu > renders 1`] = `
         >
           
           <h2
-            class="mx-4"
+            class="header mb-4"
             data-v-cf2c9067=""
           >
             $t('tablesDrawer.header')
           </h2>
           <div
-            class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
             data-v-cf2c9067=""
-            data-v-de37061b=""
-            style="width: 400px;"
           >
-            <!---->
-            <div
-              class="v-card__loader"
-            >
-              <div
-                aria-hidden="true"
-                aria-valuemax="100"
-                aria-valuemin="0"
-                class="v-progress-linear v-theme--light v-locale--is-ltr"
-                role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-              >
-                <!---->
-                <div
-                  class="v-progress-linear__background"
-                  style="width: 100%;"
-                />
-                <transition-stub
-                  appear="false"
-                  css="true"
-                  name="fade-transition"
-                  persisted="false"
-                >
-                  <div
-                    class="v-progress-linear__indeterminate"
-                  >
-                    
-                    <div
-                      class="v-progress-linear__indeterminate long"
-                    />
-                    <div
-                      class="v-progress-linear__indeterminate short"
-                    />
-                    
-                  </div>
-                </transition-stub>
-                <!---->
-              </div>
-            </div>
-            <!---->
-            <!---->
-            
-            <div
-              class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-              data-v-de37061b=""
-              role="listbox"
-              tabindex="0"
-            >
-              
-              
-              
-              
-            </div>
-            
-            <!---->
-            
-            <!---->
-            <span
-              class="v-card__underlay"
-            />
-            
+            $t('tablesDrawer.noTables')
           </div>
           
         </div>
diff --git a/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap
index 95e46b24c2..d3f629103b 100644
--- a/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap
+++ b/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap
@@ -8,159 +8,101 @@ exports[`TableList > renders correctly 1`] = `
     class="v-application__wrap"
   >
     
-    <div
-      class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
+    <ul
+      class="list"
       data-v-de37061b=""
-      style="width: 400px;"
     >
-      <!---->
-      <div
-        class="v-card__loader"
+      
+      <li
+        class="table"
+        data-v-de37061b=""
       >
         <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="v-progress-linear v-theme--light v-locale--is-ltr"
-          role="progressbar"
-          style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+          class="table-info bg-dropdown-background"
+          data-v-de37061b=""
+        >
+          <span
+            data-v-de37061b=""
+          >
+            my meeting
+          </span>
+          <span
+            class="subtitle"
+            data-v-de37061b=""
+          >
+            $t('rooms.participantCount')
+          </span>
+        </div>
+        <button
+          class="action"
+          data-v-de37061b=""
         >
-          <!---->
-          <div
-            class="v-progress-linear__background"
-            style="width: 100%;"
-          />
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
+          <i
+            aria-hidden="true"
+            class="v-icon notranslate v-theme--light v-icon--size-default icon"
+            data-v-de37061b=""
           >
-            <div
-              class="v-progress-linear__indeterminate"
+            <svg
+              fill="none"
+              height="17"
+              viewBox="0 0 21 17"
+              width="21"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              
-              <div
-                class="v-progress-linear__indeterminate long"
-              />
-              <div
-                class="v-progress-linear__indeterminate short"
+              <path
+                d="M7.68844 12.4824H9.66834V9.51172H12.6382V7.53125H9.66834V4.56055H7.68844V7.53125H4.71859V9.51172H7.68844V12.4824ZM2.73869 16.4434C2.19422 16.4434 1.72812 16.2494 1.34038 15.8616C0.952654 15.4738 0.758789 15.0075 0.758789 14.4629V2.58008C0.758789 2.03545 0.952654 1.56921 1.34038 1.18137C1.72812 0.79353 2.19422 0.599609 2.73869 0.599609H14.6181C15.1626 0.599609 15.6287 0.79353 16.0164 1.18137C16.4041 1.56921 16.598 2.03545 16.598 2.58008V7.03613L20.5578 3.0752V13.9678L16.598 10.0068V14.4629C16.598 15.0075 16.4041 15.4738 16.0164 15.8616C15.6287 16.2494 15.1626 16.4434 14.6181 16.4434H2.73869ZM2.73869 14.4629H14.6181V2.58008H2.73869V14.4629Z"
+                fill="currentColor"
               />
-              
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      
-      <div
-        class="v-list v-theme--light v-list--density-default v-list--two-line"
+            </svg>
+          </i>
+        </button>
+      </li>
+      <li
+        class="table"
         data-v-de37061b=""
-        role="listbox"
-        tabindex="0"
       >
-        
-        
         <div
-          class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text table"
+          class="table-info bg-dropdown-background"
           data-v-de37061b=""
-          tabindex="-2"
         >
-          
           <span
-            class="v-list-item__overlay"
-          />
+            data-v-de37061b=""
+          >
+            my meeting
+          </span>
           <span
-            class="v-list-item__underlay"
-          />
-          
-          <!---->
-          <div
-            class="v-list-item__content"
-            data-no-activator=""
+            class="subtitle"
+            data-v-de37061b=""
           >
-            <div
-              class="v-list-item-title"
-            >
-              my meeting
-            </div>
-            <div
-              class="v-list-item-subtitle"
-            >
-              $t('rooms.participantCount')
-            </div>
-            
-            <!--
-        &lt;template v-if="item.prepend" #prepend&gt;
-          &lt;component :is="item.prepend" v-bind="item.prependProps" /&gt;
-        &lt;/template&gt;
-        -->
-            <!--
-        &lt;template v-if="item.append" #append&gt;
-          &lt;component :is="item.append" v-bind="item.appendProps" /&gt;
-        &lt;/template&gt;
-        -->
-            
-          </div>
-          <!---->
+            $t('rooms.participantCount')
+          </span>
         </div>
-        <div
-          class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text table"
+        <button
+          class="action"
           data-v-de37061b=""
-          tabindex="-2"
         >
-          
-          <span
-            class="v-list-item__overlay"
-          />
-          <span
-            class="v-list-item__underlay"
-          />
-          
-          <!---->
-          <div
-            class="v-list-item__content"
-            data-no-activator=""
+          <i
+            aria-hidden="true"
+            class="v-icon notranslate v-theme--light v-icon--size-default icon"
+            data-v-de37061b=""
           >
-            <div
-              class="v-list-item-title"
-            >
-              my meeting
-            </div>
-            <div
-              class="v-list-item-subtitle"
+            <svg
+              fill="none"
+              height="17"
+              viewBox="0 0 21 17"
+              width="21"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              $t('rooms.participantCount')
-            </div>
-            
-            <!--
-        &lt;template v-if="item.prepend" #prepend&gt;
-          &lt;component :is="item.prepend" v-bind="item.prependProps" /&gt;
-        &lt;/template&gt;
-        -->
-            <!--
-        &lt;template v-if="item.append" #append&gt;
-          &lt;component :is="item.append" v-bind="item.appendProps" /&gt;
-        &lt;/template&gt;
-        -->
-            
-          </div>
-          <!---->
-        </div>
-        
-        
-      </div>
-      
-      <!---->
-      
-      <!---->
-      <span
-        class="v-card__underlay"
-      />
+              <path
+                d="M7.68844 12.4824H9.66834V9.51172H12.6382V7.53125H9.66834V4.56055H7.68844V7.53125H4.71859V9.51172H7.68844V12.4824ZM2.73869 16.4434C2.19422 16.4434 1.72812 16.2494 1.34038 15.8616C0.952654 15.4738 0.758789 15.0075 0.758789 14.4629V2.58008C0.758789 2.03545 0.952654 1.56921 1.34038 1.18137C1.72812 0.79353 2.19422 0.599609 2.73869 0.599609H14.6181C15.1626 0.599609 15.6287 0.79353 16.0164 1.18137C16.4041 1.56921 16.598 2.03545 16.598 2.58008V7.03613L20.5578 3.0752V13.9678L16.598 10.0068V14.4629C16.598 15.0075 16.4041 15.4738 16.0164 15.8616C15.6287 16.2494 15.1626 16.4434 14.6181 16.4434H2.73869ZM2.73869 14.4629H14.6181V2.58008H2.73869V14.4629Z"
+                fill="currentColor"
+              />
+            </svg>
+          </i>
+        </button>
+      </li>
       
-    </div>
+    </ul>
     
   </div>
 </div>
diff --git a/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
index 1029bb6e87..56186dd25a 100644
--- a/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
+++ b/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
@@ -10,7 +10,7 @@ exports[`TablesDrawer > renders correctly 1`] = `
     
     
     <nav
-      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
       data-v-cf2c9067=""
       drawer="true"
       style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px;"
@@ -22,7 +22,7 @@ exports[`TablesDrawer > renders correctly 1`] = `
       >
         
         <div
-          class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
           data-v-cf2c9067=""
         >
           <!---->
@@ -31,7 +31,7 @@ exports[`TablesDrawer > renders correctly 1`] = `
           >
             
             <div
-              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
             >
               <div
                 class="v-field__overlay"
@@ -184,78 +184,15 @@ exports[`TablesDrawer > renders correctly 1`] = `
         >
           
           <h2
-            class="mx-4"
+            class="header mb-4"
             data-v-cf2c9067=""
           >
             $t('tablesDrawer.header')
           </h2>
           <div
-            class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
             data-v-cf2c9067=""
-            data-v-de37061b=""
-            style="width: 400px;"
           >
-            <!---->
-            <div
-              class="v-card__loader"
-            >
-              <div
-                aria-hidden="true"
-                aria-valuemax="100"
-                aria-valuemin="0"
-                class="v-progress-linear v-theme--light v-locale--is-ltr"
-                role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-              >
-                <!---->
-                <div
-                  class="v-progress-linear__background"
-                  style="width: 100%;"
-                />
-                <transition-stub
-                  appear="false"
-                  css="true"
-                  name="fade-transition"
-                  persisted="false"
-                >
-                  <div
-                    class="v-progress-linear__indeterminate"
-                  >
-                    
-                    <div
-                      class="v-progress-linear__indeterminate long"
-                    />
-                    <div
-                      class="v-progress-linear__indeterminate short"
-                    />
-                    
-                  </div>
-                </transition-stub>
-                <!---->
-              </div>
-            </div>
-            <!---->
-            <!---->
-            
-            <div
-              class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-              data-v-de37061b=""
-              role="listbox"
-              tabindex="0"
-            >
-              
-              
-              
-              
-            </div>
-            
-            <!---->
-            
-            <!---->
-            <span
-              class="v-card__underlay"
-            />
-            
+            $t('tablesDrawer.noTables')
           </div>
           
         </div>
diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
index 9c519632ec..20ce692907 100644
--- a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
+++ b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -756,7 +756,7 @@ exports[`DefaultLayout > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
         data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
@@ -767,7 +767,7 @@ exports[`DefaultLayout > renders 1`] = `
         >
           
           <div
-            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
             data-v-cf2c9067=""
           >
             <!---->
@@ -776,7 +776,7 @@ exports[`DefaultLayout > renders 1`] = `
             >
               
               <div
-                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
                 <div
                   class="v-field__overlay"
@@ -929,78 +929,15 @@ exports[`DefaultLayout > renders 1`] = `
           >
             
             <h2
-              class="mx-4"
+              class="header mb-4"
               data-v-cf2c9067=""
             >
               $t('tablesDrawer.header')
             </h2>
             <div
-              class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
               data-v-cf2c9067=""
-              data-v-de37061b=""
-              style="width: 400px;"
             >
-              <!---->
-              <div
-                class="v-card__loader"
-              >
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="v-progress-linear v-theme--light v-locale--is-ltr"
-                  role="progressbar"
-                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                >
-                  <!---->
-                  <div
-                    class="v-progress-linear__background"
-                    style="width: 100%;"
-                  />
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-progress-linear__indeterminate"
-                    >
-                      
-                      <div
-                        class="v-progress-linear__indeterminate long"
-                      />
-                      <div
-                        class="v-progress-linear__indeterminate short"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
-              </div>
-              <!---->
-              <!---->
-              
-              <div
-                class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-de37061b=""
-                role="listbox"
-                tabindex="0"
-              >
-                
-                
-                
-                
-              </div>
-              
-              <!---->
-              
-              <!---->
-              <span
-                class="v-card__underlay"
-              />
-              
+              $t('tablesDrawer.noTables')
             </div>
             
           </div>
@@ -1037,199 +974,35 @@ exports[`DefaultLayout > renders 1`] = `
         </div>
       </div>
       
-      <div
-        class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5"
-        data-v-96a196cc=""
+      
+      <nav
+        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4 d-md-none"
+        data-v-cf2c9067=""
+        style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
       >
-        
-        <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
-          data-v-cf2c9067=""
-          style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
+        <!---->
+        <!---->
+        <div
+          class="v-navigation-drawer__content"
         >
-          <!---->
-          <!---->
+          
           <div
-            class="v-navigation-drawer__content"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
+            data-v-cf2c9067=""
           >
-            
-            <div
-              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
-              data-v-cf2c9067=""
-            >
-              <!---->
-              <div
-                class="v-input__control"
-              >
-                
-                <div
-                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
-                >
-                  <div
-                    class="v-field__overlay"
-                  />
-                  <div
-                    class="v-field__loader"
-                  >
-                    <div
-                      aria-hidden="true"
-                      aria-valuemax="100"
-                      aria-valuemin="0"
-                      class="v-progress-linear v-theme--light v-locale--is-ltr"
-                      role="progressbar"
-                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                    >
-                      <!---->
-                      <div
-                        class="v-progress-linear__background"
-                        style="width: 100%;"
-                      />
-                      <transition-stub
-                        appear="false"
-                        css="true"
-                        name="fade-transition"
-                        persisted="false"
-                      >
-                        <div
-                          class="v-progress-linear__indeterminate"
-                        >
-                          
-                          <div
-                            class="v-progress-linear__indeterminate long"
-                          />
-                          <div
-                            class="v-progress-linear__indeterminate short"
-                          />
-                          
-                        </div>
-                      </transition-stub>
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="v-field__prepend-inner"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__field"
-                    data-no-activator=""
-                  >
-                    <label
-                      aria-hidden="true"
-                      class="v-label v-field-label v-field-label--floating"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    <label
-                      class="v-label v-field-label"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    
-                    
-                    <!---->
-                    <input
-                      aria-describedby="input-6-messages"
-                      class="v-field__input"
-                      id="input-6"
-                      size="1"
-                      type="text"
-                    />
-                    <!---->
-                    
-                    
-                  </div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="expand-x-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-field__clearable"
-                      style="display: none;"
-                    >
-                      
-                      <i
-                        aria-hidden="false"
-                        aria-label="$vuetify.input.clear"
-                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                        role="button"
-                        tabindex="0"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <div
-                    class="v-field__append-inner"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__outline"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                </div>
-                
-              </div>
-              <!---->
-              <div
-                class="v-input__details"
-              >
-                <transition-group-stub
-                  appear="false"
-                  aria-live="polite"
-                  class="v-messages"
-                  css="true"
-                  id="input-6-messages"
-                  name="slide-y-transition"
-                  persisted="false"
-                  role="alert"
-                  tag="div"
-                >
-                  <!---->
-                </transition-group-stub>
-                <!---->
-              </div>
-            </div>
+            <!---->
             <div
-              class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-cf2c9067=""
-              role="listbox"
-              tabindex="0"
+              class="v-input__control"
             >
               
-              <h2
-                class="mx-4"
-                data-v-cf2c9067=""
-              >
-                $t('tablesDrawer.header')
-              </h2>
               <div
-                class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-cf2c9067=""
-                data-v-de37061b=""
-                style="width: 400px;"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
-                <!---->
                 <div
-                  class="v-card__loader"
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
                 >
                   <div
                     aria-hidden="true"
@@ -1266,45 +1039,141 @@ exports[`DefaultLayout > renders 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!---->
-                <!---->
-                
                 <div
-                  class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-de37061b=""
-                  role="listbox"
-                  tabindex="0"
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
                 >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
                   
                   
+                  <!---->
+                  <input
+                    aria-describedby="input-6-messages"
+                    class="v-field__input"
+                    id="input-6"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
                   
                   
                 </div>
-                
-                <!---->
-                
-                <!---->
-                <span
-                  class="v-card__underlay"
-                />
-                
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
               </div>
               
             </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-6-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
+            data-v-cf2c9067=""
+            role="listbox"
+            tabindex="0"
+          >
+            
+            <h2
+              class="header mb-4"
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.header')
+            </h2>
+            <div
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.noTables')
+            </div>
             
           </div>
-          <!---->
-        </nav>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade-transition"
-          persisted="false"
-        >
-          <!---->
-        </transition-stub>
-        
-      </div>
+          
+        </div>
+        <!---->
+      </nav>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="fade-transition"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
+      
       <div
         class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
         data-v-96a196cc=""
diff --git a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
index fced555fce..8e9d61244f 100644
--- a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
@@ -756,7 +756,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
         data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
@@ -767,7 +767,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
         >
           
           <div
-            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
             data-v-cf2c9067=""
           >
             <!---->
@@ -776,7 +776,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
             >
               
               <div
-                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
                 <div
                   class="v-field__overlay"
@@ -929,78 +929,15 @@ exports[`IndexPage > without apollo error > renders 1`] = `
           >
             
             <h2
-              class="mx-4"
+              class="header mb-4"
               data-v-cf2c9067=""
             >
               $t('tablesDrawer.header')
             </h2>
             <div
-              class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
               data-v-cf2c9067=""
-              data-v-de37061b=""
-              style="width: 400px;"
             >
-              <!---->
-              <div
-                class="v-card__loader"
-              >
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="v-progress-linear v-theme--light v-locale--is-ltr"
-                  role="progressbar"
-                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                >
-                  <!---->
-                  <div
-                    class="v-progress-linear__background"
-                    style="width: 100%;"
-                  />
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-progress-linear__indeterminate"
-                    >
-                      
-                      <div
-                        class="v-progress-linear__indeterminate long"
-                      />
-                      <div
-                        class="v-progress-linear__indeterminate short"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
-              </div>
-              <!---->
-              <!---->
-              
-              <div
-                class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-de37061b=""
-                role="listbox"
-                tabindex="0"
-              >
-                
-                
-                
-                
-              </div>
-              
-              <!---->
-              
-              <!---->
-              <span
-                class="v-card__underlay"
-              />
-              
+              $t('tablesDrawer.noTables')
             </div>
             
           </div>
@@ -1669,199 +1606,35 @@ exports[`IndexPage > without apollo error > renders 1`] = `
         </div>
       </div>
       
-      <div
-        class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5"
-        data-v-96a196cc=""
+      
+      <nav
+        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4 d-md-none"
+        data-v-cf2c9067=""
+        style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
       >
-        
-        <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
-          data-v-cf2c9067=""
-          style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
+        <!---->
+        <!---->
+        <div
+          class="v-navigation-drawer__content"
         >
-          <!---->
-          <!---->
+          
           <div
-            class="v-navigation-drawer__content"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
+            data-v-cf2c9067=""
           >
-            
-            <div
-              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
-              data-v-cf2c9067=""
-            >
-              <!---->
-              <div
-                class="v-input__control"
-              >
-                
-                <div
-                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
-                >
-                  <div
-                    class="v-field__overlay"
-                  />
-                  <div
-                    class="v-field__loader"
-                  >
-                    <div
-                      aria-hidden="true"
-                      aria-valuemax="100"
-                      aria-valuemin="0"
-                      class="v-progress-linear v-theme--light v-locale--is-ltr"
-                      role="progressbar"
-                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                    >
-                      <!---->
-                      <div
-                        class="v-progress-linear__background"
-                        style="width: 100%;"
-                      />
-                      <transition-stub
-                        appear="false"
-                        css="true"
-                        name="fade-transition"
-                        persisted="false"
-                      >
-                        <div
-                          class="v-progress-linear__indeterminate"
-                        >
-                          
-                          <div
-                            class="v-progress-linear__indeterminate long"
-                          />
-                          <div
-                            class="v-progress-linear__indeterminate short"
-                          />
-                          
-                        </div>
-                      </transition-stub>
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="v-field__prepend-inner"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__field"
-                    data-no-activator=""
-                  >
-                    <label
-                      aria-hidden="true"
-                      class="v-label v-field-label v-field-label--floating"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    <label
-                      class="v-label v-field-label"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    
-                    
-                    <!---->
-                    <input
-                      aria-describedby="input-6-messages"
-                      class="v-field__input"
-                      id="input-6"
-                      size="1"
-                      type="text"
-                    />
-                    <!---->
-                    
-                    
-                  </div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="expand-x-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-field__clearable"
-                      style="display: none;"
-                    >
-                      
-                      <i
-                        aria-hidden="false"
-                        aria-label="$vuetify.input.clear"
-                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                        role="button"
-                        tabindex="0"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <div
-                    class="v-field__append-inner"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__outline"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                </div>
-                
-              </div>
-              <!---->
-              <div
-                class="v-input__details"
-              >
-                <transition-group-stub
-                  appear="false"
-                  aria-live="polite"
-                  class="v-messages"
-                  css="true"
-                  id="input-6-messages"
-                  name="slide-y-transition"
-                  persisted="false"
-                  role="alert"
-                  tag="div"
-                >
-                  <!---->
-                </transition-group-stub>
-                <!---->
-              </div>
-            </div>
+            <!---->
             <div
-              class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-cf2c9067=""
-              role="listbox"
-              tabindex="0"
+              class="v-input__control"
             >
               
-              <h2
-                class="mx-4"
-                data-v-cf2c9067=""
-              >
-                $t('tablesDrawer.header')
-              </h2>
               <div
-                class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-cf2c9067=""
-                data-v-de37061b=""
-                style="width: 400px;"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
-                <!---->
                 <div
-                  class="v-card__loader"
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
                 >
                   <div
                     aria-hidden="true"
@@ -1898,45 +1671,141 @@ exports[`IndexPage > without apollo error > renders 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!---->
-                <!---->
-                
                 <div
-                  class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-de37061b=""
-                  role="listbox"
-                  tabindex="0"
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
                 >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
                   
                   
+                  <!---->
+                  <input
+                    aria-describedby="input-6-messages"
+                    class="v-field__input"
+                    id="input-6"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
                   
                   
                 </div>
-                
-                <!---->
-                
-                <!---->
-                <span
-                  class="v-card__underlay"
-                />
-                
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
               </div>
               
             </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-6-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
+            data-v-cf2c9067=""
+            role="listbox"
+            tabindex="0"
+          >
+            
+            <h2
+              class="header mb-4"
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.header')
+            </h2>
+            <div
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.noTables')
+            </div>
             
           </div>
-          <!---->
-        </nav>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade-transition"
-          persisted="false"
-        >
-          <!---->
-        </transition-stub>
-        
-      </div>
+          
+        </div>
+        <!---->
+      </nav>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="fade-transition"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
+      
       <div
         class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
         data-v-96a196cc=""
diff --git a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
index 2d79ca5fcb..35eca39a41 100644
--- a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
@@ -757,7 +757,7 @@ exports[`Room Page > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
         data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
@@ -768,7 +768,7 @@ exports[`Room Page > renders 1`] = `
         >
           
           <div
-            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
             data-v-cf2c9067=""
           >
             <!---->
@@ -777,7 +777,7 @@ exports[`Room Page > renders 1`] = `
             >
               
               <div
-                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
                 <div
                   class="v-field__overlay"
@@ -930,78 +930,15 @@ exports[`Room Page > renders 1`] = `
           >
             
             <h2
-              class="mx-4"
+              class="header mb-4"
               data-v-cf2c9067=""
             >
               $t('tablesDrawer.header')
             </h2>
             <div
-              class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
               data-v-cf2c9067=""
-              data-v-de37061b=""
-              style="width: 400px;"
             >
-              <!---->
-              <div
-                class="v-card__loader"
-              >
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="v-progress-linear v-theme--light v-locale--is-ltr"
-                  role="progressbar"
-                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                >
-                  <!---->
-                  <div
-                    class="v-progress-linear__background"
-                    style="width: 100%;"
-                  />
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-progress-linear__indeterminate"
-                    >
-                      
-                      <div
-                        class="v-progress-linear__indeterminate long"
-                      />
-                      <div
-                        class="v-progress-linear__indeterminate short"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
-              </div>
-              <!---->
-              <!---->
-              
-              <div
-                class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-de37061b=""
-                role="listbox"
-                tabindex="0"
-              >
-                
-                
-                
-                
-              </div>
-              
-              <!---->
-              
-              <!---->
-              <span
-                class="v-card__underlay"
-              />
-              
+              $t('tablesDrawer.noTables')
             </div>
             
           </div>
@@ -1044,199 +981,35 @@ exports[`Room Page > renders 1`] = `
         </div>
       </div>
       
-      <div
-        class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5"
-        data-v-96a196cc=""
+      
+      <nav
+        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4 d-md-none"
+        data-v-cf2c9067=""
+        style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
       >
-        
-        <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
-          data-v-cf2c9067=""
-          style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
+        <!---->
+        <!---->
+        <div
+          class="v-navigation-drawer__content"
         >
-          <!---->
-          <!---->
+          
           <div
-            class="v-navigation-drawer__content"
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-text-field search"
+            data-v-cf2c9067=""
           >
-            
-            <div
-              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
-              data-v-cf2c9067=""
-            >
-              <!---->
-              <div
-                class="v-input__control"
-              >
-                
-                <div
-                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
-                >
-                  <div
-                    class="v-field__overlay"
-                  />
-                  <div
-                    class="v-field__loader"
-                  >
-                    <div
-                      aria-hidden="true"
-                      aria-valuemax="100"
-                      aria-valuemin="0"
-                      class="v-progress-linear v-theme--light v-locale--is-ltr"
-                      role="progressbar"
-                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
-                    >
-                      <!---->
-                      <div
-                        class="v-progress-linear__background"
-                        style="width: 100%;"
-                      />
-                      <transition-stub
-                        appear="false"
-                        css="true"
-                        name="fade-transition"
-                        persisted="false"
-                      >
-                        <div
-                          class="v-progress-linear__indeterminate"
-                        >
-                          
-                          <div
-                            class="v-progress-linear__indeterminate long"
-                          />
-                          <div
-                            class="v-progress-linear__indeterminate short"
-                          />
-                          
-                        </div>
-                      </transition-stub>
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="v-field__prepend-inner"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__field"
-                    data-no-activator=""
-                  >
-                    <label
-                      aria-hidden="true"
-                      class="v-label v-field-label v-field-label--floating"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    <label
-                      class="v-label v-field-label"
-                      for="input-6"
-                    >
-                      <!---->
-                      
-                      $t('tablesDrawer.searchPlaceholder')
-                      
-                    </label>
-                    
-                    
-                    <!---->
-                    <input
-                      aria-describedby="input-6-messages"
-                      class="v-field__input"
-                      id="input-6"
-                      size="1"
-                      type="text"
-                    />
-                    <!---->
-                    
-                    
-                  </div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="expand-x-transition"
-                    persisted="false"
-                  >
-                    <div
-                      class="v-field__clearable"
-                      style="display: none;"
-                    >
-                      
-                      <i
-                        aria-hidden="false"
-                        aria-label="$vuetify.input.clear"
-                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
-                        role="button"
-                        tabindex="0"
-                      />
-                      
-                    </div>
-                  </transition-stub>
-                  <div
-                    class="v-field__append-inner"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                  <div
-                    class="v-field__outline"
-                  >
-                    <!---->
-                    <!---->
-                  </div>
-                </div>
-                
-              </div>
-              <!---->
-              <div
-                class="v-input__details"
-              >
-                <transition-group-stub
-                  appear="false"
-                  aria-live="polite"
-                  class="v-messages"
-                  css="true"
-                  id="input-6-messages"
-                  name="slide-y-transition"
-                  persisted="false"
-                  role="alert"
-                  tag="div"
-                >
-                  <!---->
-                </transition-group-stub>
-                <!---->
-              </div>
-            </div>
+            <!---->
             <div
-              class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-cf2c9067=""
-              role="listbox"
-              tabindex="0"
+              class="v-input__control"
             >
               
-              <h2
-                class="mx-4"
-                data-v-cf2c9067=""
-              >
-                $t('tablesDrawer.header')
-              </h2>
               <div
-                class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-cf2c9067=""
-                data-v-de37061b=""
-                style="width: 400px;"
+                class="v-field v-field--appended v-field--center-affix v-field--flat v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
               >
-                <!---->
                 <div
-                  class="v-card__loader"
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
                 >
                   <div
                     aria-hidden="true"
@@ -1273,45 +1046,141 @@ exports[`Room Page > renders 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!---->
-                <!---->
-                
                 <div
-                  class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-de37061b=""
-                  role="listbox"
-                  tabindex="0"
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
                 >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-6"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
                   
                   
+                  <!---->
+                  <input
+                    aria-describedby="input-6-messages"
+                    class="v-field__input"
+                    id="input-6"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
                   
                   
                 </div>
-                
-                <!---->
-                
-                <!---->
-                <span
-                  class="v-card__underlay"
-                />
-                
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
               </div>
               
             </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-6-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
+            data-v-cf2c9067=""
+            role="listbox"
+            tabindex="0"
+          >
+            
+            <h2
+              class="header mb-4"
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.header')
+            </h2>
+            <div
+              data-v-cf2c9067=""
+            >
+              $t('tablesDrawer.noTables')
+            </div>
             
           </div>
-          <!---->
-        </nav>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade-transition"
-          persisted="false"
-        >
-          <!---->
-        </transition-stub>
-        
-      </div>
+          
+        </div>
+        <!---->
+      </nav>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="fade-transition"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
+      
       <div
         class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
         data-v-96a196cc=""