From 8e44b55c974ca4769404894fe2f79ca62130d7be Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 9 Mar 2023 16:44:09 -0500
Subject: [PATCH 1/4] Make Status its own column

Co-Authored-By: Jason Varga <jason@pixelfear.com>
---
 .../CP/Collections/CollectionsController.php        |  5 +++++
 src/Http/Resources/CP/Entries/Entries.php           | 10 ++++++++++
 src/Http/Resources/CP/Entries/ListedEntry.php       | 13 ++++++++++---
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/Http/Controllers/CP/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index 041bca2e396..4c94b6a1fa9 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -75,6 +75,11 @@ public function show(Request $request, $collection)
 
         $columns = $blueprint
             ->columns()
+            ->prepend(Column::make('status')
+                ->listable(true)
+                ->visible(true)
+                ->defaultVisibility(true)
+                ->sortable(false), 'status')
             ->setPreferred("collections.{$collection->handle()}.columns")
             ->rejectUnlisted()
             ->values();
diff --git a/src/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index c0fd9e4a01e..c2c4141928c 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -2,6 +2,8 @@
 
 namespace Statamic\Http\Resources\CP\Entries;
 
+use Statamic\CP\Column;
+use Statamic\Http\Resources\CP\Entries\ListedEntry;
 use Illuminate\Http\Resources\Json\ResourceCollection;
 use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
@@ -31,6 +33,14 @@ private function setColumns()
     {
         $columns = $this->blueprint->columns();
 
+        $status = Column::make('status')
+            ->listable(true)
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(false);
+
+        $columns->prepend($status, 'status');
+
         if ($key = $this->columnPreferenceKey) {
             $columns->setPreferred($key);
         }
diff --git a/src/Http/Resources/CP/Entries/ListedEntry.php b/src/Http/Resources/CP/Entries/ListedEntry.php
index a63f83e2549..505047b9bec 100644
--- a/src/Http/Resources/CP/Entries/ListedEntry.php
+++ b/src/Http/Resources/CP/Entries/ListedEntry.php
@@ -33,6 +33,7 @@ public function toArray($request)
         return [
             'id' => $entry->id(),
             'published' => $entry->published(),
+            'status' => $entry->status(),
             'private' => $entry->private(),
             'date' => $this->when($collection->dated(), function () {
                 return $this->resource->date()->inPreferredFormat();
@@ -60,13 +61,19 @@ protected function values($extra = [])
                 $value = $extra[$key] ?? $this->resource->value($key);
             }
 
-            $value = $this->blueprint
-                ->field($key)
-                ->setValue($value)
+            $field = $this->blueprint->field($key);
+
+            if (! $field) {
+                return [$key => $value];
+            }
+
+            $value = $field->setValue($value)
                 ->setParent($this->resource)
                 ->preProcessIndex()
                 ->value();
 
+
+
             return [$key => $value];
         });
     }

From 2cdb1de5ffc92e7d1ccc17fc287455fc660bd0a4 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 9 Mar 2023 16:46:25 -0500
Subject: [PATCH 2/4] Greatly improve the data-tables UI in every way

- titles will wrap to 2 lines max, will show the status dot if there's no status field shown
- relationship fields have a new little badge style and will truncate to each on one line
- content fields get smaller text and wrap to 2 lines max
- new status column
- title fields have a reasonable min-width set because they're important
- title fields will still show the status dot if the status column isn't visible
- date fields will no longer wrap to two lines
- wide tables will scroll horizontally instead of overflow, keeping the checkbox and actions columns in view at all times
---
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 resources/css/components/popover.css          |  35 ++--
 resources/css/elements/tables.css             | 155 ++++++++++++++----
 resources/js/components/DropdownList.vue      |   9 +-
 resources/js/components/Popover.vue           |  21 ++-
 .../js/components/collections/Listing.vue     |   4 +-
 resources/js/components/data-list/Filters.vue |   4 +-
 resources/js/components/data-list/Table.vue   |  23 ++-
 .../js/components/data-list/ToggleAll.vue     |   2 +-
 resources/js/components/entries/Listing.vue   | 109 +++++++-----
 .../RelationshipIndexFieldtype.vue            |  14 +-
 .../js/components/taxonomies/Listing.vue      |   2 +-
 resources/js/components/terms/Listing.vue     |   4 +-
 resources/js/components/users/Listing.vue     |   2 +-
 resources/lang/en/messages.php                |   3 +
 tailwind.config.js                            |   5 +
 17 files changed, 285 insertions(+), 118 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 88ec712a068..53e5993d735 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
         "@babel/preset-env": "^7.20.2",
         "@rollup/plugin-inject": "^5.0.3",
         "@tailwindcss/container-queries": "^0.1.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
         "autoprefixer": "^10.4.0",
@@ -4053,6 +4054,15 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
+      "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
diff --git a/package.json b/package.json
index 8cec9155431..5ba57538251 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^10.4.0",
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index d17c12772f0..9fb3c471052 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -34,11 +34,27 @@
     position: relative;
 }
 
+/*  When open */
+.popover-open {
+    .popover {
+        pointer-events: auto;
+        visibility: visible;
+    }
+
+    .popover-content {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .rotating-dots {
+        transform: rotate(90deg);
+    }
+}
+
 /*  Supporting elements */
 .rotating-dots {
     @apply relative cursor-pointer;
     transition: .12s ease-out;
-    /*  top: 1px; */
 }
 
 .rotating-dots-button {
@@ -54,20 +70,3 @@
         @apply focus-outline;
     }
 }
-
-/*  When open */
-.popover-open {
-    .popover {
-        pointer-events: auto;
-        visibility: visible;
-    }
-
-    .popover-content {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .rotating-dots {
-        transform: rotate(90deg);
-    }
-}
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 721e009095b..a625df7aa78 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -44,49 +44,49 @@
 		}
 
         th {
-            @apply font-medium px-4 py-2;
+            @apply font-medium px-4 py-3 whitespace-nowrap;
             &:first-child { @apply rounded-tl-lg; }
 			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
 		}
+        th.handle-column {
+            @apply p-0 w-4;
+        }
 		.type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 pr-4 text-right;
-			width: 24px;
-		}
 	}
 
     tbody {
 		outline: none;
         tr {
-			@apply border-b text-sm;
+			@apply border-b border-gray-400 text-sm;
 
 			&.row-selected {
 				@apply bg-gray-200;
 			}
 
 			&:first-child {
-				td:first-child {
-				    @apply rounded-tl;
+				td:first-child, th:first-child {
+				    @apply rounded-tl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-tr;
+				td:last-child, th:last-child {
+				    @apply rounded-tr-md;
 				}
 			}
 
 			&:last-child {
 				@apply border-none;
-				td:first-child {
-				    @apply rounded-bl;
+
+                td:first-child, th:first-child {
+				    @apply rounded-bl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-br;
+				td:last-child, th:last-child {
+				    @apply rounded-br-md;
 				}
 			}
 
@@ -99,25 +99,19 @@
             }
 
             td {
-                @apply py-2 px-4 break-words;
+                @apply py-2 px-4 break-words ;
+            }
+
+            td.table-drag-handle {
+                @apply w-1 border-r h-full py-2 px-0;
             }
 		}
-		.type-column {
+
+        .type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 text-right;
-			width: 24px;
-			.rotating-dots-button {
-				margin-right: 18px;
-			}
-		}
     }
 
-    .checkbox-column {
-		@apply w-4 pr-0 relative z-10;
-		padding-left: 20px;
-    }
 
     .sortable-column {
         @apply cursor-pointer select-none;
@@ -148,11 +142,67 @@
     }
 }
 
-@screen md {
+/* Sticky Meta Columns */
+.data-table {
+    thead th.checkbox-column {
+        @apply p-0 pr-2 z-10 sticky -left-px;
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    thead th.actions-column {
+        @apply p-0 pl-2 text-right sticky z-1 -right-px;
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    tbody th.checkbox-column {
+        @apply z-1 px-3 sticky -left-px;
+        background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+    }
+
+    tbody th.actions-column {
+        @apply p-0 pl-4 text-right sticky -right-px z-1;
+        background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+        min-width: 45px;
+        width: 45px;
+    }
+
+    tbody tr.row-selected .checkbox-column {
+        background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr.row-selected .actions-column {
+        background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr:hover .checkbox-column {
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+
+    tbody tr:hover .actions-column {
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+}
+
+/* .data-table[data-size="sm"] {
+    thead th.checkbox-column,
+    thead th.actions-column,
+    tbody th.checkbox-column,
+    tbody th.actions-column {
+        position: static !important;
+        background: none !important;
+    }
+} */
+
+
+/* @screen md {
 	.data-table {
 		@apply w-full table;
 	}
-}
+} */
 
 .data-list-header ~ .data-table {
     thead th {
@@ -259,3 +309,50 @@ table.control {
         padding-left: 30px;
     }
 }
+
+
+/* Index Fields
+  ========================================================================== */
+
+.bard-index-field,
+.code-index-field,
+.markdown-index-field,
+.text-index-field,
+.textarea-index-field {
+    @apply line-clamp-2 text-xs;
+}
+
+.title-index-field {
+    @apply line-clamp-2;
+    min-width: 10vw;
+}
+
+.relationship-index-field {
+    min-width: 10vw;
+    .relationship-index-field-item {
+        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs;
+        a {
+            @apply line-clamp-1;
+        }
+    }
+}
+
+.date-index-field {
+    @apply whitespace-nowrap text-gray-800;
+}
+
+.slug-index-field {
+    @apply line-clamp-2 font-mono text-2xs;
+}
+
+.status-index-field {
+    @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
+
+    &.status-published:not(.status-private) {
+        @apply text-lime-900 bg-lime-200 ;
+    }
+
+    &.status-scheduled {
+        @apply text-amber-900 bg-amber-200;
+    }
+}
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index 576061d93f6..6fd4b0e2786 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose">
+    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose" :strategy="strategy">
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
@@ -20,7 +20,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom'
+            default: 'bottom-end'
         },
         scroll: {
             type: Boolean,
@@ -30,6 +30,11 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        strategy() {
+            return this.scroll ? 'fixed' : 'absolute';
+        }
     }
 }
 </script>
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 4dcf1a27aa9..75205771507 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -20,26 +20,30 @@ export default {
     mixins: [ clickaway ],
 
     props: {
-        disabled: {
+        autoclose: {
             type: Boolean,
             default: false
         },
-        placement: {
-            type: String,
-            default: 'bottom',
+        disabled: {
+            type: Boolean,
+            default: false
         },
         offset: {
             type: Array,
             default: () => [0, 10]
         },
+        placement: {
+            type: String,
+            default: 'bottom-end',
+        },
         scroll: {
             type: Boolean,
             default: false
         },
-        autoclose: {
-            type: Boolean,
-            default: false
-        }
+        strategy: {
+            type: String,
+            default: 'absolute'
+        },
     },
 
     data() {
@@ -63,6 +67,7 @@ export default {
         bindPopper() {
             this.popper = createPopper(this.$refs.trigger, this.$refs.popover, {
                 placement: this.placement,
+                strategy: this.strategy,
                 modifiers: [
                     {
                         name: 'offset',
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index ab2f45da8a2..265933f1a9b 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -1,12 +1,12 @@
 <template>
     <data-list ref="dataList" :columns="columns" :rows="rows">
-        <div class="card p-0" slot-scope="{ filteredRows: rows }">
+        <div class="card overflow-hidden p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: collection }">
                     <a :href="collection.entries_url">{{ collection.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: collection, index }">
-                    <dropdown-list>
+                    <dropdown-list scroll placement="left-start">
                         <dropdown-item :text="__('View')" :redirect="collection.entries_url" />
                         <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url"  />
                         <dropdown-item v-if="collection.editable" :text="__('Edit Collection')" :redirect="collection.edit_url" />
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index b7eb311adf2..a56697e61d3 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -3,7 +3,7 @@
         <div class="flex flex-wrap px-3 border-b pt-2">
 
             <!-- Field filter (requires custom selection UI) -->
-            <popover v-if="fieldFilter">
+            <popover v-if="fieldFilter" scroll strategy="fixed">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
                         {{ __('Field') }}
@@ -39,7 +39,7 @@
             </popover>
 
             <!-- Standard non-field filters -->
-            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle">
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" scroll strategy="fixed">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 55917186d0b..ff90ff81bdc 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,8 +1,8 @@
 <template>
-    <table ref="table" tabindex="0" class="data-table" :class="{ 'opacity-50': loading, 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
+    <table :data-size="relativeColumnsSize" ref="table" tabindex="0" class="data-table" :class="{ 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
         <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
-                <th class="checkbox-column" v-if="allowBulkActions || reorderable">
+                <th :class="{'checkbox-column': ! reorderable, 'handle-column': reorderable}" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
                 </th>
                 <th
@@ -14,10 +14,11 @@
                         'cursor-not-allowed': !sortable,
                         'text-right pr-8': column.numeric,
                     }"
+                    class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="column.label" />
-                    <svg v-if="sharedState.sortColumn === column.field" :class="sharedState.sortDirection" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1">
+                    <svg :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
                 </th>
@@ -39,7 +40,7 @@
             <slot name="tbody-start" />
             <tr v-for="(row, index) in rows" :key="row.id" class="sortable-row outline-none" :class="{'row-selected': sharedState.selections.includes(row.id)}">
                 <td class="table-drag-handle" v-if="reorderable"></td>
-                <td class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
                     <input
                         v-if="!reorderable"
                         type="checkbox"
@@ -49,7 +50,7 @@
                         :id="`checkbox-${row.id}`"
                         @click="checkboxClicked(row, index, $event)"
                     />
-                </td>
+                </th>
                 <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'text-right pr-8': column.numeric}">
                     <slot
                         :name="`cell-${column.field}`"
@@ -69,14 +70,14 @@
                         <template v-if="type === 'terms'">{{ row.taxonomy.title }}</template>
                     </span>
                 </td>
-                <td class="actions-column">
+                <th class="actions-column">
                     <slot
                         name="actions"
                         :row="row"
                         :index="actualIndex(row)"
                         :display-index="index"
                     ></slot>
-                </td>
+                </th>
             </tr>
         </tbody>
         </sortable-list>
@@ -144,6 +145,14 @@ export default {
             return this.sharedState.selections.length === this.sharedState.maxSelections;
         },
 
+        relativeColumnsSize() {
+            if (this.visibleColumns.length <= 4) return 'sm';
+            if (this.visibleColumns.length <= 8) return 'md';
+            if (this.visibleColumns.length >= 12) return 'lx';
+
+            return 'xl';
+        },
+
         singleSelect() {
             return this.sharedState.maxSelections === 1;
         },
diff --git a/resources/js/components/data-list/ToggleAll.vue b/resources/js/components/data-list/ToggleAll.vue
index 3fe97a95c75..0cbf17ec09d 100644
--- a/resources/js/components/data-list/ToggleAll.vue
+++ b/resources/js/components/data-list/ToggleAll.vue
@@ -1,5 +1,5 @@
 <template>
-    <label for="checkerOfAllBoxes" class="btn btn-sm px-1.5 flex items-center justify-center -ml-1.5 relative -left-px cursor-pointer">
+    <label for="checkerOfAllBoxes" class="flex items-center justify-center relative cursor-pointer">
         <input type="checkbox" @change="toggle" :checked="anyItemsChecked" id="checkerOfAllBoxes" class="relative top-0">
     </label>
 </template>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 0e4de7b851e..3235cf5d37a 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,14 +15,14 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
+                <div class="card overflow-hidden p-0 relative">
                     <div class="flex items-center justify-between p-2 text-sm border-b">
 
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <data-list-filter-presets
                             ref="presets"
-                            v-show="!reordering && ! showFilters"
+                            v-show="! showFilters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
                             :active-filters="activeFilters"
@@ -75,41 +74,45 @@
                         @started="actionStarted"
                         @completed="actionCompleted"
                     />
-
-                    <data-list-table
-                        v-show="items.length"
-                        :allow-bulk-actions="!reordering"
-                        :loading="loading"
-                        :reorderable="reordering"
-                        :sortable="!reordering"
-                        :toggle-selection-on-row-click="true"
-                        @sorted="sorted"
-                        @reordered="reordered"
-                    >
-                        <template slot="cell-title" slot-scope="{ row: entry }">
-                            <div class="flex items-center">
-                                <div class="little-dot mr-2" :class="getStatusClass(entry)" />
-                                <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
-                            </div>
-                        </template>
-                        <template slot="cell-slug" slot-scope="{ row: entry }">
-                            <span class="font-mono text-2xs">{{ entry.slug }}</span>
-                        </template>
-                        <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list placement="bottom-start">
-                                <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
-                                <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
-                                <div class="divider" v-if="entry.actions.length" />
-                                <data-list-inline-actions
-                                    :item="entry.id"
-                                    :url="actionUrl"
-                                    :actions="entry.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="!reordering"
+                            :loading="loading"
+                            :reorderable="reordering"
+                            :sortable="!reordering"
+                            :toggle-selection-on-row-click="true"
+                            @sorted="sorted"
+                            @reordered="reordered"
+                        >
+                            <template slot="cell-title" slot-scope="{ row: entry }">
+                                <div class="title-index-field">
+                                    <div class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                    <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
+                                </div>
+                            </template>
+                            <template slot="cell-status" slot-scope="{ row: entry }">
+                                <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                            </template>
+                            <template slot="cell-slug" slot-scope="{ row: entry }">
+                                <div class="slug-index-field" :title="entry.slug">{{ entry.slug }}</div>
+                            </template>
+                            <template slot="actions" slot-scope="{ row: entry, index }">
+                                <dropdown-list placement="left-start" scroll>
+                                    <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
+                                    <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
+                                    <div class="divider" v-if="entry.actions.length" />
+                                    <data-list-inline-actions
+                                        :item="entry.id"
+                                        :url="actionUrl"
+                                        :actions="entry.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
+                                    />
+                                </dropdown-list>
+                            </template>
+                        </data-list-table>
+                    </div>
                 </div>
                 <data-list-pagination
                     class="mt-6"
@@ -186,12 +189,36 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-lime-600';
             } else {
                 return 'bg-gray-400';
             }
         },
 
+        getStatusLabel(entry) {
+            if (entry.status === 'published') {
+                return __('Published');
+            } else if (entry.status === 'scheduled') {
+                return __('Scheduled');
+            } else if (entry.status === 'expired') {
+                return __('Expired');
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
+        getStatusTooltip(entry) {
+            if (entry.status === 'published') {
+                return __('messages.status_published_with_date', {date: entry.date})
+            } else if (entry.status === 'scheduled') {
+                return __('messages.status_scheduled_with_date', {date: entry.date})
+            } else if (entry.status === 'expired') {
+                return __('messages.status_expired_with_date', {date: entry.date})
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
         reorder() {
             this.filtersReset();
 
@@ -208,6 +235,10 @@ export default {
             this.request();
         },
 
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
+
         reordered(items) {
             this.items = items;
         },
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index 2fb13efa5f1..e99d073e51c 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -1,15 +1,17 @@
 <template>
 
-    <div class="text-2xs">
+    <div class="flex flex-wrap">
         <div
             v-for="(item, i) in value"
             :key="item.id"
-            class="flex items-center"
-            :class="{ 'mb-2': i < value.length-1 }"
+            class="relationship-index-field-item"
+            :class="{ 'mb-1.5': i < value.length-1 }"
         >
-            <div v-if="item.published && item.published !== null"
-                class="little-dot mr-2" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
-            <a :href="item.edit_url">{{ item.title }}</a>
+            <div class="flex items-center shrink">
+                <div v-if="item.published && item.published !== null"
+                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
+                <a :href="item.edit_url" :title="item.title" v-text="item.title" />
+            </div>
         </div>
     </div>
 
diff --git a/resources/js/components/taxonomies/Listing.vue b/resources/js/components/taxonomies/Listing.vue
index 391c6c95541..746f666d319 100644
--- a/resources/js/components/taxonomies/Listing.vue
+++ b/resources/js/components/taxonomies/Listing.vue
@@ -6,7 +6,7 @@
                     <a :href="taxonomy.terms_url">{{ taxonomy.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: taxonomy, index }">
-                    <dropdown-list>
+                    <dropdown-list placement="left-start" scroll>
                         <dropdown-item :text="__('Edit')" :redirect="taxonomy.edit_url" />
                         <dropdown-item :text="__('Edit Blueprints')" :redirect="taxonomy.blueprints_url" />
                         <dropdown-item
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index bb18f09dcc9..ebb56860dcd 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -16,7 +16,7 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
+                <div class="card overflow-hidden p-0 relative">
                     <div class="flex items-center justify-between p-2 text-sm border-b">
 
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
@@ -93,7 +93,7 @@
                             <span class="font-mono text-2xs">{{ term.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: term, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('View')" :redirect="term.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="term.edit_url" />
                                 <div class="divider" />
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 2a494997364..1097068abd3 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -97,7 +97,7 @@
                             <span v-for="group in (groups || [])" class="badge-pill-sm mr-1">{{ group.title }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: user, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <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
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 62a62bbc62d..764c60a2caa 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -185,6 +185,9 @@
     'session_expiry_logged_out_for_inactivity' => 'You have been logged out because you\'ve been inactive for a while.',
     'session_expiry_logging_out_in_seconds' => 'You have been inactive for a while and will be logged out in :seconds seconds. Click to extend your session.',
     'session_expiry_new_window' => 'Opens in a new window. Come back once you\'ve logged in.',
+    'status_expired_with_date' => 'Expired on :date',
+    'status_published_with_date' => 'Published on :date',
+    'status_scheduled_with_date' => 'Scheduled to be published on :date',
     'show_slugs_instructions' => 'Whether to display slugs in the tree view.',
     'tab_sections_instructions' => 'The fields in each section will be grouped together into tabs. Create new fields, reuse existing fields, or import entire groups of fields from existing fieldsets.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
diff --git a/tailwind.config.js b/tailwind.config.js
index b18b28034cc..edbd7fc7fcd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,8 @@ module.exports = {
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
+            lime: colors.green,
+            amber: colors.amber,
         },
         screens: {
             'sm': '576px',
@@ -152,6 +154,8 @@ module.exports = {
                 240: '60rem',
             },
             zIndex: {
+                1: '1',
+                2: '2',
                 5: '5',
                 200: '200',
                 top: '1001',
@@ -162,6 +166,7 @@ module.exports = {
     },
     plugins: [
         require('@tailwindcss/container-queries'),
+        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/typography'),
     ],
     important: true,

From c5ffe06343ce6ff32d1eb4061cecece58226e04f Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 9 Mar 2023 16:46:41 -0500
Subject: [PATCH 3/4] Refresh the ColumnPicker UI

---
 resources/css/components/column-picker.css    | 11 ++----
 .../js/components/data-list/ColumnPicker.vue  | 35 ++++++++++---------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css
index 7f1061743d8..e7828b6d122 100644
--- a/resources/css/components/column-picker.css
+++ b/resources/css/components/column-picker.css
@@ -3,17 +3,10 @@
 }
 
 .column-picker-item {
-    @apply bg-white text-sm outline-none flex items-center rounded select-none;
-    padding: 4px 8px;
-    margin: -1px 0;
+    @apply text-sm outline-none flex items-center select-none h-full;
 
     &.sortable {
-        cursor: grab;
-
-        label {
-            cursor: grab;
-        }
-
+        @apply rounded bg-white border;
         &:hover  {
             @apply bg-gray-200;
         }
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index 3015e3b5849..dd37ad9fc3a 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover ref="popover">
+    <popover ref="popover" scroll strategy="fixed">
 
         <template slot="trigger">
             <button
@@ -10,32 +10,35 @@
             </button>
         </template>
 
-        <div class="column-picker">
+        <div class="column-picker rounded-t-md bg-gray-100 w-64">
+            <header v-text="__('Displayed Columns')" class="border-b px-2 py-2 text-sm bg-white rounded-t-md font-medium"/>
             <sortable-list
                 v-model="selectedColumns"
                 :vertical="true"
-                item-class="column-picker-item"
-                handle-class="column-picker-item"
+                item-class="item"
+                handle-class="item"
                 append-to=".popover-content"
             >
-                <div class="outline-none text-left px-2 py-2">
-                    <h6 v-text="__('Displayed Columns')" class="p-2"/>
-                    <div class="column-picker-item sortable" v-for="column in selectedColumns" :key="column.field">
-                        <label>
+                <div class="flex flex-col space-y-1 px-2 p-3 select-none">
+                    <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field">
+                        <div class="item-move py-1">&nbsp;</div>
+                        <div class="flex flex-1 ml-2 items-center p-0">
                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
                             {{ column.label }}
-                        </label>
+                        </div>
                     </div>
                 </div>
             </sortable-list>
 
-            <div v-if="hiddenColumns.length" class="outline-none text-left px-2 pb-2">
-                <h6 v-text="__('Available Columns')" class="px-2 pb-2"/>
-                <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
-                    <label class="cursor-pointer">
-                        <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                        {{ column.label }}
-                    </label>
+            <div v-if="hiddenColumns.length" class="outline-none text-left">
+                <header v-text="__('Available Columns')" class="border-y px-2 py-2 text-sm bg-white font-medium"/>
+                <div class="flex flex-col space-y-1 py-2 px-3 select-none">
+                    <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                            {{ column.label }}
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>

From 85cdbfd3b37af3465822c2481f70838ce53e260d Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Thu, 9 Mar 2023 21:47:27 +0000
Subject: [PATCH 4/4] Apply fixes from StyleCI

---
 src/Http/Resources/CP/Entries/Entries.php     | 3 +--
 src/Http/Resources/CP/Entries/ListedEntry.php | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index c2c4141928c..2f15f40024d 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -2,9 +2,8 @@
 
 namespace Statamic\Http\Resources\CP\Entries;
 
-use Statamic\CP\Column;
-use Statamic\Http\Resources\CP\Entries\ListedEntry;
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\CP\Column;
 use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Entries extends ResourceCollection
diff --git a/src/Http/Resources/CP/Entries/ListedEntry.php b/src/Http/Resources/CP/Entries/ListedEntry.php
index 505047b9bec..cd1a30fd5a3 100644
--- a/src/Http/Resources/CP/Entries/ListedEntry.php
+++ b/src/Http/Resources/CP/Entries/ListedEntry.php
@@ -72,8 +72,6 @@ protected function values($extra = [])
                 ->preProcessIndex()
                 ->value();
 
-
-
             return [$key => $value];
         });
     }