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>