fix: quasar layout

Author: glorat

examples/vue-quasar/src/components/Application.vue

@@ -262,13 +262,6 @@ const handleInitialized = async (registry: PluginRegistry) => {
                   <Search />
                 </aside>
 
-                <button
-                  v-if="leftDrawerOpen || rightDrawerOpen"
-                  type="button"
-                  class="application__drawer-overlay"
-                  aria-label="Close drawers"
-                  @click="closeDrawers"
-                />
               </div>
             </div>
           </template>
@@ -324,39 +317,36 @@ const handleInitialized = async (registry: PluginRegistry) => {
 }
 
 .application__drawer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
   width: 300px;
-  flex: 0 0 auto;
   background-color: #ffffff;
   border-right: 1px solid var(--q-color-grey-4);
   overflow: auto;
   transform: translateX(-100%);
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  pointer-events: none;
+  opacity: 0;
   z-index: 2;
 }
 
+.application__drawer--left {
+  left: 0;
+}
+
 .application__drawer--right {
+  right: 0;
+  left: auto;
   border-right: none;
   border-left: 1px solid var(--q-color-grey-4);
   transform: translateX(100%);
 }
 
 .application__drawer.is-open {
   transform: translateX(0);
-}
-
-.application__drawer-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.25);
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.application__drawer-overlay:focus {
-  outline: 2px solid var(--q-color-primary);
+  pointer-events: auto;
+  opacity: 1;
 }
 
 .application__main {

examples/vue-quasar/src/components/PageControls.vue

@@ -89,9 +89,10 @@ const handleNextPage = () => {
   }
 };
 
-const handleInputChange = (value: string) => {
+const handleInputChange = (value: string | number | null) => {
   // Only allow numeric input
-  const numericValue = value.replace(/[^0-9]/g, '');
+  const stringValue = value === null ? '' : String(value);
+  const numericValue = stringValue.replace(/[^0-9]/g, '');
   inputValue.value = numericValue;
 };
 
@@ -142,19 +143,21 @@ const isNextDisabled = computed(() => state.value.currentPage === state.value.to
 
 <style scoped>
 .page-controls {
-  position: absolute;
-  bottom: 16px;
+  position: fixed;
   left: 50%;
+  bottom: 32px;
   transform: translateX(-50%);
   z-index: 1000;
-  opacity: v-bind(isVisible ? 1: 0);
+  opacity: v-bind('isVisible ? 1 : 0');
   transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
 }
 
 .page-controls-card {
   background-color: #f8f9fa;
   padding: 6px 10px;
   border-radius: 10px;
+  pointer-events: auto;
 }
 
 .page-input {