From 96fb2c736cf3543842f00317e85598912ada4667 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Wed, 4 Sep 2024 09:48:53 +0200
Subject: [PATCH] fix(embed): calendar header overlapping and adjust to compact
 design

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 css/app-navigation.scss                       |  2 +-
 css/public.scss                               | 25 +++++++++++--------
 .../AppNavigation/EmbedTopNavigation.vue      |  8 +++---
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/css/app-navigation.scss b/css/app-navigation.scss
index ff857baed..be3319668 100644
--- a/css/app-navigation.scss
+++ b/css/app-navigation.scss
@@ -31,7 +31,7 @@
 		}
 
 		.button:only-child {
-			border-radius: var(--border-radius-pill);
+			border-radius: var(--border-radius-element);
 		}
 
 		.button:hover,
diff --git a/css/public.scss b/css/public.scss
index f924d960d..03b19ee00 100644
--- a/css/public.scss
+++ b/css/public.scss
@@ -8,18 +8,19 @@
 }
 
 .content.app-calendar.app-calendar-public-embedded {
+	flex-direction: column;
+
 	#embed-header {
-		position: fixed;
-		top: 0;
-		left: 0;
 		height: 50px;
 		width: 100%;
+		padding: calc(var(--default-grid-baseline) * 2);
 		box-sizing: border-box;
 		background-color: var(--color-main-background);
 		border-bottom: 1px solid var(--color-border);
 		overflow: visible;
 		z-index: 2000;
 		display: flex;
+		align-items: center;
 		justify-content: space-between;
 
 		.embed-header__date-section,
@@ -39,16 +40,20 @@
 				min-width: 150px;
 			}
 		}
+
+		.datepicker-button-section,
+		.today-button-section,
+		.view-button-section {
+			button {
+				// Header has only one row so the built-in spacing is not needed
+				margin: 0;
+			}
+		}
 	}
 
 	.app-content {
-		margin-top: 44px;
-		//position: absolute !important;
-		//top: 44px;
-		//left: 0;
-		//right: 0;
-		//bottom: 0;
-		//min-height: unset !important;
+		// Expand to full height (need to overwrite this because a flex column layout is used here)
+		flex-basis: auto;
 	}
 }
 
diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
index 5ed09bd70..1d5eeab10 100644
--- a/src/components/AppNavigation/EmbedTopNavigation.vue
+++ b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -3,16 +3,16 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<header :id="isWidget? 'widget-header' :'embed-header'" role="banner">
-		<div :class="isWidget?'widget-header__date-section' :'embed-header__date-section'">
+	<header :id="isWidget ? 'widget-header' : 'embed-header'" role="banner">
+		<div :class="isWidget ? 'widget-header__date-section' : 'embed-header__date-section'">
 			<AppNavigationHeaderDatePicker :is-widget="isWidget" />
 			<AppNavigationHeaderTodayButton v-if="!isWidget" />
 		</div>
-		<div :class="isWidget?'widget-header__views-section' :'embed-header__views-section'">
+		<div :class="isWidget ? 'widget-header__views-section' : 'embed-header__views-section'">
 			<AppNavigationHeaderViewButtons :is-widget="isWidget" />
 		</div>
 		<!-- TODO have one button per calendar -->
-		<div v-if="!isWidget" class="widget-header__share-section">
+		<div v-if="!isWidget" class="embed-header__share-section">
 			<Actions>
 				<template #icon>
 					<Download :size="20" decorative />