From 50b43cdc2f7989cdcc73fc1845b0f8870795e00c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 13:12:04 +0100
Subject: [PATCH] feat: More styling for placeholder

---
 source/code/windows.js                        | 38 ++++++++++++++-----
 .../screens/demo/examples/ui/windows.liquid   |  2 +-
 source/style/modules/ui/_windows_module.scss  | 18 ++++++++-
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index 2834619..c7ab166 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -52,42 +52,62 @@ class HippieTaskBar {
 			if (!this.isDragging) return;
 
 			const closestEdge = getClosestEdge(this.placeholder);
-			const borderRadius = '16px';
+			const borderRadius = '4px';
 			const attributes = {
 				top: {
+					className: 'top',
 					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderTopStyle: 'solid',
+						borderTopColor: 'white',
 						borderTopRightRadius: '',
 						borderBottomRightRadius: borderRadius,
 						borderBottomLeftRadius: borderRadius,
-						borderTopLeftRadius: '',
-						flexDirection: 'row'
+						borderTopLeftRadius: ''
 					}
 				},
 				right: {
+					className: 'right',
 					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderRightStyle: 'solid',
+						borderRightColor: 'white',
 						borderTopRightRadius: '',
 						borderBottomRightRadius: '',
 						borderBottomLeftRadius: borderRadius,
-						borderTopLeftRadius: borderRadius,
-						flexDirection: 'column'
+						borderTopLeftRadius: borderRadius
 					}
 				},
 				bottom: {
+					className: 'bottom',
 					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderBottomStyle: 'solid',
+						borderBottomColor: 'white',
 						borderTopRightRadius: borderRadius,
 						borderBottomRightRadius: '',
 						borderBottomLeftRadius: '',
-						borderTopLeftRadius: borderRadius,
-						flexDirection: 'row'
+						borderTopLeftRadius: borderRadius
 					}
 				},
 				left: {
+					className: 'left',
 					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderLeftStyle: 'solid',
+						borderLeftColor: 'white',
 						borderTopRightRadius: borderRadius,
 						borderBottomRightRadius: borderRadius,
 						borderBottomLeftRadius: '',
-						borderTopLeftRadius: '',
-						flexDirection: 'column'
+						borderTopLeftRadius: ''
 					}
 				}
 			};
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 35987a9..af1dbeb 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -43,7 +43,7 @@ tags:
 	<div class="box"></div>
 	<div class="box_brd"></div>
 	<div>
-		<div>task bar</div>
+		<span>task bar</span>
 		<div class="box_brd"></div>
 	</div>
 </div>
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index 8a63ffe..98475c4 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/source/style/modules/ui/_windows_module.scss
@@ -118,10 +118,25 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	display: none;
 	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	border: 2px dashed black;
+	border: 1px dashed black;
+	border-radius: 2px;
 	background-color: rgba(0, 0, 0, .4);
 	padding: 16px;
 
+	&.top,
+	&.bottom {
+		span {
+			writing-mode: unset;
+		}
+	}
+
+	&.right,
+	&.left {
+		span {
+			writing-mode: vertical-rl;
+		}
+	}
+
 	* {
 		pointer-events: none;
 	}
@@ -129,6 +144,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	& > div {
 		@extend %flex-bar;
 		flex-direction: inherit;
+		flex-wrap: nowrap;
 	}
 
 	.box,