From 39542b82d971efcf36ed31a54cb312744c3fc403 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 21 Jun 2024 13:46:23 +0200
Subject: [PATCH] Some quick UI fixes for the new dropzones (#4146)

There were a few UI bugs including:
- overflow issues
- the sticky commit button stopped sticking
---
 app/src/lib/components/BranchCard.svelte      |  3 +-
 .../components/BranchCard/Dropzones.svelte    | 19 ++++---------
 app/src/lib/components/CommitDragItem.svelte  | 28 ++++++-------------
 .../lib/components/Dropzone/Dropzone.svelte   |  4 ++-
 4 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/app/src/lib/components/BranchCard.svelte b/app/src/lib/components/BranchCard.svelte
index 7c707c716..e5f2507dd 100644
--- a/app/src/lib/components/BranchCard.svelte
+++ b/app/src/lib/components/BranchCard.svelte
@@ -285,15 +285,14 @@
 
 	.new-branch,
 	.no-changes {
+		flex-grow: 1;
 		user-select: none;
 		display: flex;
 		height: 100%;
 		flex-direction: column;
 		align-items: center;
 		color: var(--clr-scale-ntrl-60);
-		background: var(--clr-bg-1);
 		justify-content: center;
-		border-radius: var(--radius-m);
 		cursor: default; /* was defaulting to text cursor */
 	}
 
diff --git a/app/src/lib/components/BranchCard/Dropzones.svelte b/app/src/lib/components/BranchCard/Dropzones.svelte
index 748716fc3..8ebbb4f38 100644
--- a/app/src/lib/components/BranchCard/Dropzones.svelte
+++ b/app/src/lib/components/BranchCard/Dropzones.svelte
@@ -18,10 +18,8 @@
 	const actions = $derived(branchDragActionsFactory.build($branch));
 </script>
 
-<div class="commit-list-item">
-	<div class="commit-card-wrapper">
-		{@render moveCommitDropzone()}
-	</div>
+<div class="dragzone-wrapper">
+	{@render moveCommitDropzone()}
 </div>
 
 <!-- We require the dropzones to be nested -->
@@ -54,19 +52,12 @@
 {/snippet}
 
 <style>
-	.commit-list-item {
+	.dragzone-wrapper {
 		display: flex;
+		flex-direction: column;
 		position: relative;
-		padding: 0;
-		gap: 8px;
 		flex-grow: 1;
-		overflow: hidden;
-		&:last-child {
-			padding-bottom: 0;
-		}
-	}
-	.commit-card-wrapper {
-		position: relative;
 		width: 100%;
+		/* overflow: hidden; */
 	}
 </style>
diff --git a/app/src/lib/components/CommitDragItem.svelte b/app/src/lib/components/CommitDragItem.svelte
index 9256fe79c..fb6a2b9b1 100644
--- a/app/src/lib/components/CommitDragItem.svelte
+++ b/app/src/lib/components/CommitDragItem.svelte
@@ -24,14 +24,12 @@
 	});
 </script>
 
-<div class="commit-list-item">
-	<div class="commit-card-wrapper">
-		{#if actions}
-			{@render ammendDropzone()}
-		{:else}
-			{@render children()}
-		{/if}
-	</div>
+<div class="dropzone-wrapper">
+	{#if actions}
+		{@render ammendDropzone()}
+	{:else}
+		{@render children()}
+	{/if}
 </div>
 
 <!-- We require the dropzones to be nested -->
@@ -56,19 +54,9 @@
 {/snippet}
 
 <style>
-	.commit-list-item {
-		display: flex;
-		position: relative;
-		padding: 0;
-		gap: 8px;
-		flex-grow: 1;
-		overflow: hidden;
-		&:last-child {
-			padding-bottom: 0;
-		}
-	}
-	.commit-card-wrapper {
+	.dropzone-wrapper {
 		position: relative;
 		width: 100%;
+		overflow: hidden;
 	}
 </style>
diff --git a/app/src/lib/components/Dropzone/Dropzone.svelte b/app/src/lib/components/Dropzone/Dropzone.svelte
index 919b7921c..c7f7374e8 100644
--- a/app/src/lib/components/Dropzone/Dropzone.svelte
+++ b/app/src/lib/components/Dropzone/Dropzone.svelte
@@ -63,6 +63,8 @@
 
 <style lang="postcss">
 	.fill-height {
-		height: 100%;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 </style>