861 schema selection dialog is out of view for small screens eg mobile devices (#862)

* Make "Schema Selection Dialog" items vertical, and  "Loading JSON Schema from URL Dialog" more  user friendly

* apply formatting changes

---------

Co-authored-by: M-Jafarkhani <[email protected]>

Author: M-Jafarkhani

meta_configurator/src/components/toolbar/dialogs/InitialSchemaSelectionDialog.vue

@@ -39,14 +39,15 @@ defineExpose({show: openDialog, close: hideDialog});
 
 <template>
   <Dialog v-model:visible="showDialog" header="Select a Schema">
-    <div class="flex flex-column gap-3 bigger-dialog-content">
-      <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+    <div class="flex flex-col gap-3 bigger-dialog-content">
+      <div v-for="category in categories" :key="category.key" class="flex justify-center">
         <Button
           v-model="selectedCategory"
           :label="category.name"
           :inputId="category.key"
           name="category"
           :value="category.name"
+          class="w-full"
           @click="
             () => {
               $emit('user_selected_option', category.key);

meta_configurator/src/components/toolbar/dialogs/UrlInputDialog.vue

@@ -27,26 +27,40 @@ defineExpose({show: openDialog, close: hideDialog});
 </script>
 
 <template>
-  <Dialog v-model:visible="showDialog">
-    <div class="p-fluid">
-      <div class="p-field">
-        <label for="urlInput">Enter the URL of the schema:</label>
-        <InputText v-model="schemaUrl" id="urlInput" />
+  <Dialog v-model:visible="showDialog" header="Fetch Schema from URL" modal class="max-w-md w-full">
+    <div class="flex flex-col gap-4 p-2">
+      <div class="flex flex-col gap-2">
+        <label for="urlInput" class="font-medium text-gray-700"> Schema URL </label>
+        <InputText
+          v-model="schemaUrl"
+          id="urlInput"
+          placeholder="https://json-schema.org/draft/2020-12/schema"
+          class="w-full" />
       </div>
-      <div class="p-dialog-footer">
-        <div class="button-container">
-          <Button label="Cancel" @click="hideDialog" class="dialog-button" />
-          <Button label="Fetch Schema" @click="fetchSchemaFromSelectedUrl" class="dialog-button" />
-        </div>
+
+      <small class="text-gray-500">
+        Enter a valid URL to automatically load the JSON schema.
+      </small>
+
+      <div class="flex justify-end gap-3 mt-4">
+        <Button label="Cancel" icon="pi pi-times" @click="hideDialog" class="p-button-text" />
+        <Button
+          label="Fetch Schema"
+          icon="pi pi-download"
+          @click="fetchSchemaFromSelectedUrl"
+          :disabled="!schemaUrl"
+          autofocus />
       </div>
     </div>
   </Dialog>
 </template>
+
 <style scoped>
-.button-container {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 1rem;
+:deep(.p-dialog-header) {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+:deep(.p-inputtext) {
+  border-radius: 0.5rem;
 }
 </style>