responsive polish

app/src/views/private/components/header-bar-actions/header-bar-actions.vue

@@ -5,12 +5,12 @@
 		</v-button>
 
 		<div class="action-buttons">
+			<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
+				<v-icon name="info" outline />
+			</v-button>
+
 			<slot />
 		</div>
-
-		<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
-			<v-icon name="info" />
-		</v-button>
 	</div>
 </template>
 
@@ -39,6 +39,7 @@ export default defineComponent({
 	}
 
 	.expand {
+		--v-icon-color: var(--foreground-normal);
 		flex-shrink: 0;
 		margin-right: 8px;
 
@@ -51,18 +52,21 @@ export default defineComponent({
 		display: flex;
 		flex-shrink: 0;
 
+		.v-button.secondary {
+			--v-icon-color: var(--foreground-normal);
+		}
+
 		> *:not(:last-child) {
 			display: none;
 			margin-right: 8px;
 		}
-	}
 
-	.drawer-toggle {
-		flex-shrink: 0;
-		margin-left: 8px;
+		.drawer-toggle {
+			flex-shrink: 0;
 
-		@include breakpoint(medium) {
-			display: none;
+			@include breakpoint(medium) {
+				display: none;
+			}
 		}
 	}
 
@@ -90,7 +94,7 @@ export default defineComponent({
 
 	@include breakpoint(medium) {
 		.action-buttons ::v-deep {
-			> * {
+			> *:not(.drawer-toggle) {
 				display: inherit !important;
 			}
 		}

app/src/views/private/components/header-bar/header-bar.vue

@@ -83,7 +83,7 @@ export default defineComponent({
 	justify-content: flex-start;
 	width: 100%;
 	height: 65px;
-	margin: 24px 0;
+	margin: 0;
 	padding: 0 12px;
 	background-color: var(--background-page);
 	box-shadow: 0;
@@ -107,23 +107,36 @@ export default defineComponent({
 		position: relative;
 		display: flex;
 		align-items: center;
-		max-width: 70%;
+		max-width: calc(100% - 12px - 44px - 120px - 12px - 8px);
 		height: 100%;
 		margin-left: 12px;
 
+		@include breakpoint(small) {
+			max-width: 70%;
+		}
+
 		&.full {
-			margin-right: 20px;
-			padding-right: 20px;
+			margin-right: 12px;
+			padding-right: 0;
+
+			@include breakpoint(small) {
+				margin-right: 20px;
+				padding-right: 20px;
+			}
 		}
 
 		.headline {
 			position: absolute;
-			top: 0;
+			top: 2px;
 			left: 0;
 			color: var(--foreground-subdued);
 			white-space: nowrap;
 			opacity: 1;
 			transition: opacity var(--fast) var(--transition);
+
+			@include breakpoint(small) {
+				top: 0;
+			}
 		}
 
 		.title {
@@ -166,6 +179,7 @@ export default defineComponent({
 	}
 
 	@include breakpoint(small) {
+		margin: 24px 0;
 		padding: 0 32px;
 	}
 }

app/src/views/private/private-view.vue

@@ -260,6 +260,9 @@ export default defineComponent({
 	height: 100%;
 	background-color: var(--background-page);
 
+	--content-padding: 12px;
+	--content-padding-bottom: 60px;
+
 	.nav-overlay {
 		--v-overlay-z-index: 49;