From 5be4f06cdf71e3efe24133be90881ed118ce524a Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Wed, 27 Jul 2022 00:27:30 +0200
Subject: [PATCH] fix: table indication for sideway scroll

---
 src/components/Link.svelte  |  1 -
 src/components/Table.svelte | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index b70a48b..a00ea81 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -39,7 +39,6 @@
 		color: var(--special-color);
 		text-decoration: none;
 		font-weight: 550;
-		white-space: nowrap;
 	}
 	a:hover {
 		color: var(--outline-color);
diff --git a/src/components/Table.svelte b/src/components/Table.svelte
index b1e7d09..36fd3b4 100644
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -1,7 +1,7 @@
 <script>
 </script>
 
-<div>
+<div tabindex="0">
 	<table id="table">
 		<slot />
 	</table>
@@ -13,8 +13,18 @@
 		padding: 1rem;
 		box-shadow: 0px 0px 2px var(--shadow-color);
 		border: 1px solid var(--outline-color);
-		overflow-x: auto;
+		overflow: auto;
+		background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
+			linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
+			radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+		background-repeat: no-repeat;
+		background-color: white;
+		background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+		background-position: 0 0, 100%, 0 0, 100%;
+		background-attachment: local, local, scroll, scroll;
 	}
+
 	table {
 		border-collapse: collapse;
 		width: 100%;