Improve header's responsive design

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;

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;

frontend/src/lib/components/project/Sidebar.svelte

@@ -146,8 +146,8 @@
 	.toggle {
 		visibility: hidden;
 		position: fixed;
-		top: 5px;
+		top: 18px;
-		left: 5px;
+		left: 10px;
 		border-radius: 50%;
 		width: 50px;
 		height: 50px;

frontend/src/lib/styles/breakpoints.less

@@ -1,4 +1,4 @@
-@one-column: 480px;
+@one-column: 520px;
 
 .one-column(@rules) {
 	@media (max-width: @one-column) {