From de1df07a466cc2f9e76a526b0d9079bc7058fc06 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 1 Jan 2025 17:23:34 +1300
Subject: [PATCH] ensure modal can scroll vertically if too high for screen
 size

---
 .../interfaces/ImportInterfacesModal.vue      | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/frontend/components/interfaces/ImportInterfacesModal.vue b/src/frontend/components/interfaces/ImportInterfacesModal.vue
index 90edc2f..5e13473 100644
--- a/src/frontend/components/interfaces/ImportInterfacesModal.vue
+++ b/src/frontend/components/interfaces/ImportInterfacesModal.vue
@@ -1,61 +1,63 @@
 <template>
     <div v-if="isShowing" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity flex items-center justify-center">
-        <div class="bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-2xl w-full mx-4">
+        <div class="flex w-full h-full p-4 overflow-y-auto">
+            <div class="my-auto mx-auto w-full bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-2xl">
 
-            <!-- title -->
-            <div class="p-4 border-b dark:border-zinc-700">
-                <h3 class="text-lg font-semibold dark:text-white">Import Interfaces</h3>
-            </div>
+                <!-- title -->
+                <div class="p-4 border-b dark:border-zinc-700">
+                    <h3 class="text-lg font-semibold dark:text-white">Import Interfaces</h3>
+                </div>
 
-            <!-- content -->
-            <div class="divide-y dark:divide-zinc-700">
+                <!-- content -->
+                <div class="divide-y dark:divide-zinc-700">
 
-                <!-- file input -->
-                <div class="p-2">
-                    <div class="text-sm font-medium text-gray-700 dark:text-zinc-200">Select a Configuration File</div>
-                    <div>
-                        <input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
-                               class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
+                    <!-- file input -->
+                    <div class="p-2">
+                        <div class="text-sm font-medium text-gray-700 dark:text-zinc-200">Select a Configuration File</div>
+                        <div>
+                            <input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
+                                   class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
                         file:mr-4 file:py-2 file:px-4
                         file:rounded-md file:border-0
                         file:text-sm file:font-semibold
                         file:bg-gray-500 file:text-white
                         hover:file:bg-gray-400
                         dark:file:bg-zinc-700 dark:hover:file:bg-zinc-600">
-                    </div>
-                </div>
-
-                <!-- select interfaces -->
-                <div v-if="importableInterfaces.length > 0" class="divide-y dark:divide-zinc-700">
-                    <div class="flex p-2">
-                        <div class="my-auto mr-auto text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</div>
-                        <div class="my-auto space-x-2">
-                            <button @click="selectAllInterfaces" class="text-sm text-blue-500 hover:underline">Select All</button>
-                            <button @click="deselectAllInterfaces" class="text-sm text-blue-500 hover:underline">Deselect All</button>
                         </div>
                     </div>
-                    <div class="p-2 space-y-2 max-h-72 overflow-y-auto">
-                        <div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700 shadow">
-                            <div class="mr-auto text-sm text-gray-700 dark:text-zinc-200">
-                                <div class="font-semibold">{{ iface.name }}</div>
-                                <div class="text-sm text-gray-500">{{ iface.type }}</div>
+
+                    <!-- select interfaces -->
+                    <div v-if="importableInterfaces.length > 0" class="divide-y dark:divide-zinc-700">
+                        <div class="flex p-2">
+                            <div class="my-auto mr-auto text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</div>
+                            <div class="my-auto space-x-2">
+                                <button @click="selectAllInterfaces" class="text-sm text-blue-500 hover:underline">Select All</button>
+                                <button @click="deselectAllInterfaces" class="text-sm text-blue-500 hover:underline">Deselect All</button>
+                            </div>
+                        </div>
+                        <div class="p-2 space-y-2 max-h-72 overflow-y-auto">
+                            <div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700 shadow">
+                                <div class="mr-auto text-sm text-gray-700 dark:text-zinc-200">
+                                    <div class="font-semibold">{{ iface.name }}</div>
+                                    <div class="text-sm text-gray-500">{{ iface.type }}</div>
+                                </div>
+                                <input @click.stop type="checkbox" v-model="selectedInterfaces" :value="iface.name" class="mx-2 h-4 w-4 text-blue-600 rounded border-gray-300 dark:border-zinc-600">
                             </div>
-                            <input @click.stop type="checkbox" v-model="selectedInterfaces" :value="iface.name" class="mx-2 h-4 w-4 text-blue-600 rounded border-gray-300 dark:border-zinc-600">
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- actions -->
-            <div class="p-4 border-t dark:border-zinc-700 flex justify-end space-x-2">
-                <button @click="dismiss" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700">
-                    Cancel
-                </button>
-                <button @click="importSelectedInterfaces" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
-                    Import Selected
-                </button>
-            </div>
+                <!-- actions -->
+                <div class="p-4 border-t dark:border-zinc-700 flex justify-end space-x-2">
+                    <button @click="dismiss" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700">
+                        Cancel
+                    </button>
+                    <button @click="importSelectedInterfaces" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
+                        Import Selected
+                    </button>
+                </div>
 
+            </div>
         </div>
     </div>
 </template>