[4.x] Fix mobile issues with Fieldset Listing & Field Settings stack (#…

…9250)
statamic · Jan 9, 2024 · 49a1927 · 49a1927
1 parent 527325b
commit 49a1927
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="h-full overflow-auto bg-gray-300 h-full">
+    <div class="h-full bg-gray-300 h-full overflow-scroll">
 
         <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center ">
             <loading-graphic />

diff --git a/resources/js/components/fieldsets/Listing.vue b/resources/js/components/fieldsets/Listing.vue
@@ -1,31 +1,33 @@
 <template>
     <data-list :visible-columns="columns" :columns="columns" :rows="rows">
-        <div class="card p-0" slot-scope="{ filteredRows: rows }">
-            <data-list-table>
-                <template slot="cell-title" slot-scope="{ row: fieldset }">
-                    <a :href="fieldset.edit_url">{{ fieldset.title }}</a>
-                </template>
-                <template slot="cell-handle" slot-scope="{ value }">
-                    <span class="font-mono text-xs">{{ value }}</span>
-                </template>
-                <template slot="actions" slot-scope="{ row: fieldset, index }">
-                    <dropdown-list>
-                        <dropdown-item :text="__('Edit')" :redirect="fieldset.edit_url" />
-                        <dropdown-item
-                            v-if="fieldset.is_deletable"
-                            :text="__('Delete')"
-                            class="warning"
-                            @click="$refs[`deleter_${fieldset.id}`].confirm()"
-                        >
-                            <fieldset-deleter
-                                :ref="`deleter_${fieldset.id}`"
-                                :resource="fieldset"
-                                @deleted="removeRow(fieldset)">
-                            </fieldset-deleter>
-                        </dropdown-item>
-                    </dropdown-list>
-                </template>
-            </data-list-table>
+        <div class="card overflow-hidden p-0 relative" slot-scope="{ filteredRows: rows }">
+            <div class="overflow-x-auto overflow-y-hidden">
+                <data-list-table>
+                    <template slot="cell-title" slot-scope="{ row: fieldset }">
+                        <a :href="fieldset.edit_url">{{ fieldset.title }}</a>
+                    </template>
+                    <template slot="cell-handle" slot-scope="{ value }">
+                        <span class="font-mono text-xs">{{ value }}</span>
+                    </template>
+                    <template slot="actions" slot-scope="{ row: fieldset, index }">
+                        <dropdown-list>
+                            <dropdown-item :text="__('Edit')" :redirect="fieldset.edit_url" />
+                            <dropdown-item
+                                v-if="fieldset.is_deletable"
+                                :text="__('Delete')"
+                                class="warning"
+                                @click="$refs[`deleter_${fieldset.id}`].confirm()"
+                            >
+                                <fieldset-deleter
+                                    :ref="`deleter_${fieldset.id}`"
+                                    :resource="fieldset"
+                                    @deleted="removeRow(fieldset)">
+                                </fieldset-deleter>
+                            </dropdown-item>
+                        </dropdown-list>
+                    </template>
+                </data-list-table>
+            </div>
         </div>
     </data-list>
 </template>