Преглед изворни кода

Fix virtual keyboard overlaying input fields on SpoolBuddy settings

  When the virtual keyboard opened on the SpoolBuddy device tab, the
  API token field and Save button were hidden behind the keyboard.
  The keyboard now adds bottom scroll padding and scrolls the parent
  card (not just the focused input) to the top of the visible area,
  keeping all related fields accessible.
maziggy пре 5 месеци
родитељ
комит
6e93b9f7d1
3 измењених фајлова са 5 додато и 3 уклоњено
  1. 4 2
      frontend/src/components/VirtualKeyboard.tsx
  2. 0 0
      static/assets/index-R2cnQRS0.js
  3. 1 1
      static/index.html

+ 4 - 2
frontend/src/components/VirtualKeyboard.tsx

@@ -71,10 +71,12 @@ export function VirtualKeyboard() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (keyboardRef.current as any)?.setInput?.(activeInput.current.value);
     (keyboardRef.current as any)?.setInput?.(activeInput.current.value);
 
 
-    // Add scroll padding then scroll input into view above the keyboard
+    // Add scroll padding then scroll the input's parent card into view above the keyboard
     addScrollPadding(target);
     addScrollPadding(target);
     setTimeout(() => {
     setTimeout(() => {
-      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // Scroll the closest card/section so the entire group of fields is visible
+      const card = target.closest('.bg-zinc-800, .rounded-lg, [data-vkb-group]') as HTMLElement | null;
+      (card ?? target).scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 100);
     }, 100);
   }, [addScrollPadding]);
   }, [addScrollPadding]);
 
 

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
static/assets/index-R2cnQRS0.js


+ 1 - 1
static/index.html

@@ -23,7 +23,7 @@
 
 
     <!-- Splash screens for iOS -->
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-C7t_l7cK.js"></script>
+    <script type="module" crossorigin src="/assets/index-R2cnQRS0.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
     <link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
   </head>
   </head>
   <body>
   <body>

Неке датотеке нису приказане због велике количине промена