From c167eef29c937b5a8ff1d0d149e9af653773a713 Mon Sep 17 00:00:00 2001
From: Ian Donahue <idonahue@users.noreply.github.com>
Date: Tue, 28 Mar 2023 11:40:04 +0200
Subject: [PATCH] Refactor scrollbar CSS and improve form layout

This commit refactors the CSS for the scrollbar by removing unnecessary margin and padding properties, and changing the background color to increase contrast for better usability. The form layout in the commit page of the Svelte app is also optimized by adjusting the input and textarea elements' styling and alignment to improve overall readability and consistency.

Changes:
- Update scrollbar width and height properties
- Change scrollbar background color to rgba(255, 255, 255, 0.2)
- Remove padding and width properties from ::-webkit-scrollbar-thumb
- Adjust layout of input and textarea elements in commit page
- Improve alignment and truncation of file paths in commit file list
---
 src/app.postcss                                     |  8 +++-----
 src/routes/projects/[projectId]/commit/+page.svelte | 13 +++++++------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index ab243c70b..9d7d59b14 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -15,8 +15,7 @@
 /* width */
 ::-webkit-scrollbar {
 	width: 8px;
-	margin-right: 2px;
-	padding-right: 2px;
+	height: 8px;
 }
 
 /* Track */
@@ -26,10 +25,9 @@
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-	background: #44444A; 
+	/* background: #44444A;  */
+	background: rgba(255, 255, 255, 0.2);
 	border-radius: 10px;
-	padding-right: 2px;
-	width: 8px;
 }
 
 /* Handle on hover */
diff --git a/src/routes/projects/[projectId]/commit/+page.svelte b/src/routes/projects/[projectId]/commit/+page.svelte
index f4adca2d7..191aa6e7f 100644
--- a/src/routes/projects/[projectId]/commit/+page.svelte
+++ b/src/routes/projects/[projectId]/commit/+page.svelte
@@ -200,20 +200,21 @@
 					<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
 					<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
 				</div>
-				<ul class="w-80 truncate px-2 pb-2">
+				<ul class="truncate px-2 pb-2">
 					{#each $filesStatus as activity}
 						<li class="list-none text-zinc-300">
-							<div class="flex flex-row space-x-2">
+							<div class="flex flex-row align-middle">
 								<input
 									type="checkbox"
 									on:click={showMessage}
 									bind:group={filesSelectedForCommit}
 									value={activity.path}
+									class="w-4 mr-2 mt-1"
 								/>
-								<div>{activity.status.slice(0, 1)}</div>
+								<div class="w-4">{activity.status.slice(0, 1)}</div>
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
 								<div
-									class="cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
+									class="w-[100%] truncate cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
 									on:click={selectPath(activity.path)}
 									use:collapsable={{ value: activity.path, separator: '/' }}
 								/>
@@ -231,14 +232,14 @@
 				name="subject"
 				bind:value={commitSubject}
 				placeholder={placeholderSubject}
-				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
 			/>
 			<textarea
 				rows={messageRows}
 				name="message"
 				placeholder={placeholderMessage}
 				bind:value={commitMessage}
-				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
 			/>
 		</div>