From f5896509dad3624a114f8a6ff84a477d3054d49f Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Wed, 17 Jan 2024 20:37:31 +0100
Subject: [PATCH] Improve header's responsive design

---
 frontend/src/lib/components/project/Column.svelte  |  3 ++-
 frontend/src/lib/components/project/Header.svelte  | 11 +++++++++++
 frontend/src/lib/components/project/Sidebar.svelte |  4 ++--
 frontend/src/lib/styles/breakpoints.less           |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/project/Column.svelte b/frontend/src/lib/components/project/Column.svelte
index 3759970..1173a6b 100644
--- a/frontend/src/lib/components/project/Column.svelte
+++ b/frontend/src/lib/components/project/Column.svelte
@@ -150,6 +150,7 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		font-size: 1.5rem;
 
 		input {
 			background-color: #444;
@@ -186,8 +187,8 @@
 		cursor: pointer;
 		border-radius: 4px;
 		height: 40px;
-		font-size: 2rem;
 		display: flex;
+		font-size: 2rem;
 		justify-content: center;
 		align-items: center;
 		margin-top: 10px;
diff --git a/frontend/src/lib/components/project/Header.svelte b/frontend/src/lib/components/project/Header.svelte
index b576b4d..5fac8ab 100644
--- a/frontend/src/lib/components/project/Header.svelte
+++ b/frontend/src/lib/components/project/Header.svelte
@@ -105,6 +105,8 @@
 </header>
 
 <style lang="less">
+	@import '../../styles/breakpoints.less';
+
 	header {
 		margin: 0 2%;
 		padding: 20px 0;
@@ -116,13 +118,21 @@
 	}
 
 	h2 {
+		flex-grow: 100000;
 		font-size: 3rem;
+
+		.nosidebar({
+			padding-left: 50px;
+		});
 	}
 
 	nav {
 		display: flex;
+		flex-grow: 1;
+		flex-shrink: 0;
 		flex-direction: row;
 		align-items: center;
+		justify-content: center;
 		gap: 7px;
 
 		button {
@@ -133,6 +143,7 @@
 			border: none;
 			background-color: transparent;
 			font-size: 1.5rem;
+			flex-shrink: 0;
 
 			&.defined {
 				color: #6481cc;
diff --git a/frontend/src/lib/components/project/Sidebar.svelte b/frontend/src/lib/components/project/Sidebar.svelte
index 9cf987d..5fdbd2f 100644
--- a/frontend/src/lib/components/project/Sidebar.svelte
+++ b/frontend/src/lib/components/project/Sidebar.svelte
@@ -146,8 +146,8 @@
 	.toggle {
 		visibility: hidden;
 		position: fixed;
-		top: 5px;
-		left: 5px;
+		top: 18px;
+		left: 10px;
 		border-radius: 50%;
 		width: 50px;
 		height: 50px;
diff --git a/frontend/src/lib/styles/breakpoints.less b/frontend/src/lib/styles/breakpoints.less
index e4ac1b1..b3e2e12 100644
--- a/frontend/src/lib/styles/breakpoints.less
+++ b/frontend/src/lib/styles/breakpoints.less
@@ -1,4 +1,4 @@
-@one-column: 480px;
+@one-column: 520px;
 
 .one-column(@rules) {
 	@media (max-width: @one-column) {