Make action column sticky

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -1,4 +1,4 @@
-<div class="section gridView">
+<div class="gridView">
 	{if $view->isFilterable()}
 		<div class="gridView__filterBar">
 			<div class="gridView__filters" id="{$view->getID()}_filters">
@@ -37,7 +37,7 @@
 					</th>
 				{/foreach}
 				{if $view->hasActions()}
-					<th></th>
+					<th class="gridView__headerColumn gridView__actionColumn"></th>
 				{/if}
 			</td>
 		</thead>

wcfsetup/install/files/acp/templates/cronjobLogList.tpl

@@ -31,6 +31,8 @@
 	{/hascontent}
 </header>
 
-{unsafe:$gridView->render()}
+<div class="section">
+	{unsafe:$gridView->render()}
+</div>
 
 {include file='footer'}

wcfsetup/install/files/acp/templates/exceptionLogView.tpl

@@ -14,7 +14,9 @@
 	{/hascontent}
 </header>
 
-{unsafe:$gridView->render()}
+<div class="section">
+	{unsafe:$gridView->render()}
+</div>
 
 <script data-relocate="true">
 	require(['WoltLabSuite/Core/Acp/Controller/ExceptionLog/View'], ({ setup }) => {

wcfsetup/install/files/acp/templates/userOptionList.tpl

@@ -14,6 +14,8 @@
 	</nav>
 </header>
 
-{unsafe:$gridView->render()}
+<div class="section">
+	{unsafe:$gridView->render()}
+</div>
 
 {include file='footer'}

wcfsetup/install/files/acp/templates/userRankList.tpl

@@ -32,6 +32,8 @@
 	</nav>
 </header>
 
-{unsafe:$gridView->render()}
+<div class="section">
+	{unsafe:$gridView->render()}
+</div>
 
 {include file='footer'}

wcfsetup/install/files/style/ui/gridView.scss

@@ -1,7 +1,12 @@
+.gridView {
+	overflow: auto;
+}
+
 .gridView__table {
 	border-bottom: 1px solid var(--wcfContentBorder);
 	border-spacing: 0;
 	width: 100%;
+	overflow-wrap: break-word;
 }
 
 .gridView__column,
@@ -48,11 +53,7 @@
 	}
 }
 
-.gridView__headerRow {
-	box-shadow: inset 0 -1px 0 0 var(--wcfContentBorder);
-}
-
-.gridView__row:not(:last-child) {
+.gridView__row:not(:last-child) .gridView__column {
 	box-shadow: inset 0 -1px 0 0 var(--wcfContentBorderInner);
 }
 
@@ -72,6 +73,8 @@
 }
 
 .gridView__column {
+	background-color: var(--wcfContentContainerBackground);
+
 	&.gridView__column--title {
 		font-weight: 600;
 	}
@@ -103,6 +106,9 @@
 }
 
 .gridView__headerColumn {
+	background-color: var(--wcfContentContainerBackground);
+	box-shadow: inset 0 -1px 0 0 var(--wcfContentBorder);
+
 	&.gridView__column--digits,
 	&.gridView__column--id,
 	&.gridView__column--date {
@@ -115,6 +121,10 @@
 	width: 1px;
 	white-space: nowrap;
 	word-wrap: normal;
+	position: sticky;
+	right: 0;
+	animation: auto linear 0s 1 normal none running gridView__actionColumn__dropShadow;
+	animation-timeline: scroll(inline);
 }
 
 .gridView__filterBar {
@@ -145,3 +155,15 @@
 	display: flex;
 	gap: 10px;
 }
+
+@keyframes gridView__actionColumn__dropShadow {
+	0% {
+		filter: drop-shadow(rgba(0, 0, 0, 0.08) -2px 10px 6px);
+	}
+	75% {
+		filter: drop-shadow(rgba(0, 0, 0, 0.08) -2px 10px 6px);
+	}
+	99% {
+		filter: none;
+	}
+}