From 2b833116871d14d234829089d42fb61d4485e6c4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 19 Sep 2023 15:21:43 -0400
Subject: [PATCH] [4.x] Apply overflow styling to user listing (#8739)

---
 resources/js/components/users/Listing.vue | 82 ++++++++++++-----------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 0a09c631b1..6c0a52aed5 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -15,7 +15,7 @@
             :sort-direction="sortDirection"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
+                <div class="card overflow-hidden p-0 relative">
                     <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">
 
                         <data-list-filter-presets
@@ -65,45 +65,47 @@
                         @started="actionStarted"
                         @completed="actionCompleted"
                     />
-                    <data-list-table
-                        v-show="items.length"
-                        :allow-bulk-actions="true"
-                        :allow-column-picker="true"
-                        :column-preferences-key="preferencesKey('columns')"
-                        @sorted="sorted"
-                    >
-                        <template slot="cell-email" slot-scope="{ row: user, value }">
-                            <a :href="user.edit_url" class="flex items-center">
-                                <avatar :user="user" class="w-8 h-8 rounded-full mr-2" />
-                                {{ value }}
-                            </a>
-                        </template>
-                        <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
-                            <div class="role-index-field">
-                                <div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
-                                <div v-if="!roles || roles.length === 0" />
-                                <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
-                            </div>
-                        </template>
-                        <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
-                            <div class="groups-index-field">
-                                <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
-                            </div>
-                        </template>
-                        <template slot="actions" slot-scope="{ row: user, index }">
-                            <dropdown-list placement="right-start">
-                                <dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
-                                <dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
-                                <data-list-inline-actions
-                                    :item="user.id"
-                                    :url="actionUrl"
-                                    :actions="user.actions"
-                                    @started="actionStarted"
-                                    @completed="actionCompleted"
-                                />
-                            </dropdown-list>
-                        </template>
-                    </data-list-table>
+                    <div class="overflow-x-auto overflow-y-hidden">
+                        <data-list-table
+                            v-show="items.length"
+                            :allow-bulk-actions="true"
+                            :allow-column-picker="true"
+                            :column-preferences-key="preferencesKey('columns')"
+                            @sorted="sorted"
+                        >
+                            <template slot="cell-email" slot-scope="{ row: user, value }">
+                                <a :href="user.edit_url" class="flex items-center">
+                                    <avatar :user="user" class="w-8 h-8 rounded-full mr-2" />
+                                    {{ value }}
+                                </a>
+                            </template>
+                            <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
+                                <div class="role-index-field">
+                                    <div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
+                                    <div v-if="!roles || roles.length === 0" />
+                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
+                                </div>
+                            </template>
+                            <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
+                                <div class="groups-index-field">
+                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                                </div>
+                            </template>
+                            <template slot="actions" slot-scope="{ row: user, index }">
+                                <dropdown-list placement="right-start">
+                                    <dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
+                                    <dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
+                                    <data-list-inline-actions
+                                        :item="user.id"
+                                        :url="actionUrl"
+                                        :actions="user.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
+                                    />
+                                </dropdown-list>
+                            </template>
+                        </data-list-table>
+                    </div>
                 </div>
 
                 <data-list-pagination