GH-1883 Limit max-width for array-list fieldset with media queries

dzikoysk · Aug 12, 2023 · dc03731 · dc03731
1 parent 928264e
commit dc03731
Showing 1 changed file with 64 additions and 39 deletions.
diff --git a/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue b/reposilite-frontend/src/components/renderers/ArrayListRenderer.vue
@@ -16,47 +16,49 @@
       {{ control.description }}
       <!-- It is a list of items. You can add new entries by clicking the '+' button on the right. -->
     </div>
-    <Tabs v-model="selectedIndex">
-      <Tab
-        v-for="(element, index) in control.data"
-        :key="`${control.path}-${index}-tab`"
-        :val="index"
-        :label="createLabel(element)"
-        :indicator="true"
-        class="item"
-      />
-    </Tabs>
-    <TabPanels v-model="selectedIndex">
-      <TabPanel
+    <div class="tabs-component">
+       <Tabs v-model="selectedIndex">
+        <Tab
           v-for="(element, index) in control.data"
-          :key="`${control.path}-${index}-panel`"
+          :key="`${control.path}-${index}-tab`"
           :val="index"
-      >
-        <div :class="styles.arrayList.itemWrapper">
-          <array-list-element
-            :moveUp="moveUp(control.path, index)"
-            :moveUpEnabled="index > 0"
-            :moveDown="moveDown(control.path, index)"
-            :moveDownEnabled="index < control.data.length - 1"
-            :delete="removeItems(control.path, [index])"
-            :label="childLabelForIndex(index)"
-            :styles="styles"
-          >
-            <dispatch-renderer
-              :schema="control.schema"
-              :uischema="childUiSchema"
-              :path="composePaths(control.path, `${index}`)"
-              :enabled="control.enabled"
-              :renderers="control.renderers"
-              :cells="control.cells"
-            />
-          </array-list-element>
-        </div>
-        <div v-if="noData" :class="styles.arrayList.noData">
-          No data
-        </div>
-      </TabPanel>
-    </TabPanels>
+          :label="createLabel(element)"
+          :indicator="true"
+          class="item"
+        />
+      </Tabs>
+      <TabPanels v-model="selectedIndex">
+        <TabPanel
+            v-for="(element, index) in control.data"
+            :key="`${control.path}-${index}-panel`"
+            :val="index"
+        >
+          <div :class="styles.arrayList.itemWrapper">
+            <array-list-element
+              :moveUp="moveUp(control.path, index)"
+              :moveUpEnabled="index > 0"
+              :moveDown="moveDown(control.path, index)"
+              :moveDownEnabled="index < control.data.length - 1"
+              :delete="removeItems(control.path, [index])"
+              :label="childLabelForIndex(index)"
+              :styles="styles"
+            >
+              <dispatch-renderer
+                :schema="control.schema"
+                :uischema="childUiSchema"
+                :path="composePaths(control.path, `${index}`)"
+                :enabled="control.enabled"
+                :renderers="control.renderers"
+                :cells="control.cells"
+              />
+            </array-list-element>
+          </div>
+          <div v-if="noData" :class="styles.arrayList.noData">
+            No data
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </div>
   </fieldset>
 </template>
 
@@ -150,4 +152,27 @@ export default {
   overflow-wrap: anywhere;
   text-transform: none !important;
 }
+.tabs-component {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .tabs-component {
+    max-width: 520px;
+  }
+}
+@media (min-width: 768px) {
+  .tabs-component {
+    max-width: 648px;
+  }
+}
+@media (min-width: 1024px) {
+  .tabs-component {
+    max-width: 900px;
+  }
+}
+@media (min-width: 1280px) {
+  .tabs-component {
+    max-width: 1110px;
+  }
+}
 </style>