From c6c1fd3222089b05933177015076221e896cb85b Mon Sep 17 00:00:00 2001
From: Robert Marshall <rob@robware.uk>
Date: Sun, 9 May 2021 07:19:37 +0100
Subject: [PATCH] Create container to horizontally scroll tables.

---
 src/Website/Views/Account/Index.cshtml | 30 ++++++++++++++------------
 src/Website/Views/Home/Index.cshtml    | 17 ++++++++-------
 src/Website/wwwroot/css/style.scss     |  4 ++++
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/Website/Views/Account/Index.cshtml b/src/Website/Views/Account/Index.cshtml
index 9c8d639..a97f4a6 100644
--- a/src/Website/Views/Account/Index.cshtml
+++ b/src/Website/Views/Account/Index.cshtml
@@ -7,20 +7,22 @@
 
 <h2>Manage API Keys</h2>
 <h3>Existing Keys</h3>
-<table class="actions">
-	@foreach (var apiKey in Model.ApiKeys)
-	{
-		<tr>
-			<td>@apiKey.Name</td>
-			<td class="stretch"><pre>@apiKey.Key</pre></td>
-			<td><img src="/images/copy.svg" alt="Copy" title="Copy" onclick="navigator.clipboard.writeText('@apiKey.Key')" /></td>
-			<td>@(apiKey.Enabled?"Enabled":"Disabled")</td>
-			<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
-			<td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
-			<td><a asp-action="DeleteApiKey" asp-route-key="@apiKey.Key"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
-		</tr>
-	}
-</table>
+<div class="table-scroll-container">
+	<table class="actions">
+		@foreach (var apiKey in Model.ApiKeys)
+		{
+			<tr>
+				<td>@apiKey.Name</td>
+				<td class="stretch"><pre>@apiKey.Key</pre></td>
+				<td><img src="/images/copy.svg" alt="Copy" title="Copy" onclick="navigator.clipboard.writeText('@apiKey.Key')" /></td>
+				<td>@(apiKey.Enabled?"Enabled":"Disabled")</td>
+				<td><a asp-action="EnableApiKey" asp-route-key="@apiKey.Key"><img src="/images/enable.svg" alt="Enable" title="Enable" onclick="return confirm('Are you sure?')"/></a></td>
+				<td><a asp-action="DisableApiKey" asp-route-key="@apiKey.Key"><img src="/images/disable.svg" alt="Disable" title="Disable" onclick="return confirm('Are you sure?')"/></a></td>
+				<td><a asp-action="DeleteApiKey" asp-route-key="@apiKey.Key"><img src="/images/delete.svg" alt="Delete" title="Delete" onclick="return confirm('Are you sure?')"/></a></td>
+			</tr>
+		}
+	</table>
+</div>
 <h3>Create New Key</h3>
 <form asp-action="CreateApiKey">
 	<label for="new-key-name">Name: </label><input type="text" name="name" id="new-key-name" />
diff --git a/src/Website/Views/Home/Index.cshtml b/src/Website/Views/Home/Index.cshtml
index 3c72a88..afc3738 100644
--- a/src/Website/Views/Home/Index.cshtml
+++ b/src/Website/Views/Home/Index.cshtml
@@ -9,14 +9,15 @@
 <p>If you wish to get in contact, then get in touch via my <a href="http://uk.linkedin.com/in/robertmarshall/" target="_blank"><img alt="LinkedIn profile" src="https://static.licdn.com/scds/common/u/img/webpromo/btn_liprofile_blue_80x15.png" title=""></a>.</p>
 
 <h2>Latest code commit</h2>
-<table class="commit-table">
-	<tr><td>Repository</td><td><a href="@Model.GitCommit.RepositoryUrl">@Model.GitCommit.RepositoryName</a></td></tr>
-	<tr><td>Branch</td><td>@Model.GitCommit.BranchName</td></tr>
-	<tr><td>SHA</td><td><a href="@Model.GitCommit.CommitUrl">@Model.GitCommit.Hash</a></td></tr>
-	<tr><td>Message</td><td>@Model.GitCommit.CommitMessage</td></tr>
-	<tr><td>Timestamp</td><td>@Model.GitCommit.Timestamp</td></tr>
-</table>
-
+<div class="table-scroll-container">
+	<table class="commit-table">
+		<tr><td>Repository</td><td><a href="@Model.GitCommit.RepositoryUrl">@Model.GitCommit.RepositoryName</a></td></tr>
+		<tr><td>Branch</td><td>@Model.GitCommit.BranchName</td></tr>
+		<tr><td>SHA</td><td><a href="@Model.GitCommit.CommitUrl">@Model.GitCommit.Hash</a></td></tr>
+		<tr><td>Message</td><td>@Model.GitCommit.CommitMessage</td></tr>
+		<tr><td>Timestamp</td><td>@Model.GitCommit.Timestamp</td></tr>
+	</table>
+</div>
 <h2>Latest Blog Post</h2>
 <h3><a href="/blog/view/@Model.BlogPost.Url">@Model.BlogPost.Title</a></h3>
 <partial name="~/Views/Blog/Entry.cshtml" , model="Model.BlogPost" />
diff --git a/src/Website/wwwroot/css/style.scss b/src/Website/wwwroot/css/style.scss
index 1318fe2..a1d918a 100644
--- a/src/Website/wwwroot/css/style.scss
+++ b/src/Website/wwwroot/css/style.scss
@@ -227,6 +227,10 @@ form {
 	}
 }
 
+.table-scroll-container{
+	overflow-y: auto;
+}
+
 table.actions {
 	border-collapse: collapse;
 	width:100%;