From 7ccb1033cca50d7dfacca3c9e338d210a75074c9 Mon Sep 17 00:00:00 2001
From: Hendrik Oenings <hendrik.oenings@dataport.de>
Date: Wed, 8 Oct 2025 15:14:47 +0200
Subject: [PATCH 1/2] feat(core): add default style to polar-map

---
 examples/iceberg/components/IcebergMap.vue | 27 +++++++++++++++-------
 examples/snowbox/index.html                | 16 -------------
 src/core/components/PolarContainer.ce.vue  | 14 ++++++++---
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/examples/iceberg/components/IcebergMap.vue b/examples/iceberg/components/IcebergMap.vue
index b680de298..bbdcc55b9 100644
--- a/examples/iceberg/components/IcebergMap.vue
+++ b/examples/iceberg/components/IcebergMap.vue
@@ -1,15 +1,25 @@
 <template>
-	<div :class="$style['language-chooser']">
+	<div :class="$style['action-bar']">
 		<button class="kern-btn kern-btn--secondary" @click="switchLanguage">
 			<span class="kern-icon kern-icon--flag" />
 			<span class="kern-label">{{
 				language === 'de' ? 'Switch to English' : 'Zu Deutsch wechseln'
 			}}</span>
 		</button>
+		<button
+			class="kern-btn kern-btn--secondary"
+			@click="splitScreen = !splitScreen"
+		>
+			<span class="kern-icon kern-icon--splitscreen-left" />
+			<span class="kern-label">{{
+				splitScreen ? 'Exit split screen' : 'Enter split screen'
+			}}</span>
+		</button>
 	</div>
 	<polar-map
 		v-if="store.serviceRegister.length"
 		ref="map"
+		:class="{ [$style['split-screen']]: splitScreen }"
 		:map-configuration="store.mapConfiguration"
 		:service-register="store.serviceRegister"
 	/>
@@ -29,6 +39,7 @@ import { useIcebergStore } from '../stores/iceberg'
 const store = useIcebergStore()
 
 const language = ref('de')
+const splitScreen = ref(false)
 
 const map = useTemplateRef<typeof PolarContainer>('map')
 watch(map, (map) => {
@@ -69,16 +80,16 @@ function switchLanguage() {
 
 <style scoped>
 @import url('@polar/polar/polar.css');
-
-polar-map {
-	display: block;
-	width: 100%;
-	height: 20em;
-}
 </style>
 
 <style module>
-.language-chooser {
+.action-bar {
+	display: flex;
+	gap: 1em;
 	margin-bottom: 1em;
 }
+
+.split-screen {
+	width: 50%;
+}
 </style>
diff --git a/examples/snowbox/index.html b/examples/snowbox/index.html
index 0676068f6..8f847c098 100644
--- a/examples/snowbox/index.html
+++ b/examples/snowbox/index.html
@@ -13,7 +13,6 @@
 			:root {
 				--not-quite-white: #f2f3f4;
 				--eigengrau: #16161d;
-				--map-height: 600px;
 			}
 
 			* {
@@ -41,21 +40,6 @@
 				margin: 0.2em 0;
 			}
 
-			/* directly related to POLAR - something like this must be
-			 * available for map client to render in (see core docs for
-			 * more details on requirements) */
-			.snowbox {
-				display: block;
-				width: 100vw;
-				max-width: calc(100% + 64px);
-				height: var(--map-height);
-				position: relative;
-				margin-top: 10px;
-				margin-bottom: 10px;
-				left: -32px;
-				outline: solid var(--eigengrau);
-			}
-
 			#language-switcher {
 				outline: solid black;
 			}
diff --git a/src/core/components/PolarContainer.ce.vue b/src/core/components/PolarContainer.ce.vue
index 2421e98c9..872efc04b 100644
--- a/src/core/components/PolarContainer.ce.vue
+++ b/src/core/components/PolarContainer.ce.vue
@@ -129,12 +129,20 @@ onBeforeUnmount(() => {
 	--brand-color-c: v-bind('mainStore.configuration.theme?.brandColor?.c');
 	--brand-color-h: v-bind('mainStore.configuration.theme?.brandColor?.h');
 }
+
+@layer polar-map {
+	:host {
+		display: block;
+		width: 100%;
+		height: 30em;
+	}
+}
 </style>
 
 <style scoped>
 .polar-wrapper {
-	position: absolute;
-	height: inherit;
-	width: inherit;
+	position: relative;
+	height: 100%;
+	width: 100%;
 }
 </style>

From 28337c7b8d4451ab156e55ebdfd0c8b09db081c9 Mon Sep 17 00:00:00 2001
From: Hendrik Oenings <hendrik.oenings@dataport.de>
Date: Wed, 15 Oct 2025 12:30:51 +0200
Subject: [PATCH 2/2] test(snowbox): re-add the eigengrau styles

---
 examples/snowbox/index.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/examples/snowbox/index.html b/examples/snowbox/index.html
index 8f847c098..b348b4d94 100644
--- a/examples/snowbox/index.html
+++ b/examples/snowbox/index.html
@@ -13,6 +13,7 @@
 			:root {
 				--not-quite-white: #f2f3f4;
 				--eigengrau: #16161d;
+				--map-height: 600px;
 			}
 
 			* {
@@ -43,6 +44,17 @@
 			#language-switcher {
 				outline: solid black;
 			}
+
+			.snowbox {
+				width: 100vw;
+				max-width: calc(100% + 64px);
+				height: var(--map-height);
+				position: relative;
+				margin-top: 10px;
+				margin-bottom: 10px;
+				left: -32px;
+				outline: solid var(--eigengrau);
+			}
 		</style>
 	</head>