source/screens/demo/examples/ui/drag.njk

@@ -22,8 +22,10 @@ tags:
 {% endblock %}
 
 {% block body %}
+  <header class="io pos_fix pin_top pin_right pin_left">
+    <button data-action="add">Add</button>
+  </header>
   <div id="space"></div>
-  <button data-action="add">Add</button>
 {% endblock %}
 
 {%- block script %}

source/screens/demo/examples/ui/form.njk

@@ -19,12 +19,12 @@ tags:
 {% endblock %}
 
 {% block body %}
-	<div id="head">
+	<header class="io">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
 		<button data-action="change">Ändern</button>
 		<hr>
-	</div>
+	</header>
 	<form id="form" action="">
 		<div id="grid">
 			<div>a</div>

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 3eab0f095603236be4519081203e51bc2916801e
+Subproject commit c268f4fdcac9f4edec2503638ac6fdd98de467a9

source/style/modules/ui/_drag_module.scss

@@ -1,14 +1,6 @@
 .body_drag {
 	@extend .body_ui;
 
-	button {
-		@extend .button_io;
-		position: fixed;
-		top: 8px;
-		right: 8px;
-		margin: 0;
-	}
-
 	#space {
 		position: relative;
 		height: 100%;

source/style/modules/ui/_form_module.scss

@@ -1,15 +1,3 @@
-#head {
-	// display: flex;
-
-	button {
-			@extend .button_io;
-	}
-
-	h1 {
-		margin: 0;
-	}
-}
-
 #grid {
 	display: grid;
 	gap: 8px;