From 89db97c35876e4f354b86bcb7fa90e2c9da937f5 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 11:32:27 +0100
Subject: [PATCH 1/3] feat: New table styles

- Add variant with flex row
- Change style to be dependant
---
 elements/_tables.scss | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/elements/_tables.scss b/elements/_tables.scss
index c1766d3..39e654c 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -54,6 +54,23 @@ table {
 		table-layout: fixed;
 	}
 
+	&.flexible {
+		tr {
+			display: flex;
+			flex-flow: row nowrap;
+			align-items: stretch;
+
+			&:last-child td {
+				border-bottom: none;
+			}
+
+			td.truncate {
+				flex: 1;
+				min-width: 0;
+			}
+		}
+	}
+
 	&.table_file_simple {
 		@extend .width_full;
 	}
@@ -192,6 +209,12 @@ th, td {
 			display: none;
 		}
 	}
+
+	&.pre {
+		// border-right-width: $width_border_4;
+		// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
+		background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
+	}
 }
 
 th {
@@ -213,8 +236,6 @@ td {
 	}
 
 	&.ellipsis {
-		width: 100%;
-		max-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -234,7 +255,6 @@ td {
 			max-height: 44px;
 		}
 	}
-
 }
 
 td:last-child {
@@ -244,9 +264,3 @@ td:last-child {
 		border-bottom: 0;
 	}
 }
-
-.cell_pre {
-	// border-right-width: $width_border_4;
-	// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
-	background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
-}

From eb4349f9e5fc118d05385c81c7b553252c98f211 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 15 Mar 2026 12:23:14 +0100
Subject: [PATCH 2/3] feat: Change - to _ for selector names

---
 elements/_grouping.scss    |  2 +-
 elements/_sections.scss    |  6 +++---
 elements/_tables.scss      |  6 +-----
 global/_common.scss        | 12 ++++++------
 modules/io/_io_module.scss |  4 ++--
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index e9f92fb..b3b9082 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -302,7 +302,7 @@ div {
 	display: flex;
 
 	&.inline {
-		@extend %flex-inline;
+		@extend %flex_inline;
 	}
 
 	&.stretch {
diff --git a/elements/_sections.scss b/elements/_sections.scss
index 32a1a9a..920a854 100644
--- a/elements/_sections.scss
+++ b/elements/_sections.scss
@@ -44,7 +44,7 @@ body {
 	}
 
 	&:hover {
-		#mouse-overlay {
+		#mouse_overlay {
 			background-color: transparent !important;
 			transition: background-color config.$duration_basic config.$timing_basic 0s !important;
 		}
@@ -244,7 +244,7 @@ header {
 
 		nav,
 		ul {
-			@extend %flex-inline;
+			@extend %flex_inline;
 			align-items: stretch;
 		}
 
@@ -276,7 +276,7 @@ header {
 footer {
 	&.io {
 		nav {
-			@extend %flex-inline;
+			@extend %flex_inline;
 			align-items: stretch;
 
 			input,
diff --git a/elements/_tables.scss b/elements/_tables.scss
index 39e654c..9c6b379 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -39,7 +39,7 @@ table {
 		border: config.$width_border_basic solid transparent;
 	}
 
-	&.stripe {
+	&.striped {
 		td {
 			border-top: 0;
 			border-bottom: 0;
@@ -71,10 +71,6 @@ table {
 		}
 	}
 
-	&.table_file_simple {
-		@extend .width_full;
-	}
-
 	&.draggable tbody tr {
 		transition: opacity 0.2s;
 
diff --git a/global/_common.scss b/global/_common.scss
index 8199c44..d2d193d 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -163,7 +163,7 @@
 
 // Flex & grid
 // -----------------------------------------------------------------------------
-%flex-inline {
+%flex_inline {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -172,18 +172,18 @@
 	gap: config.$space_half config.$space_basic;
 }
 
-%flex-column,
-%flex-row {
+%flex_column,
+%flex_row {
 	display: flex;
 	flex-wrap: nowrap;
 	gap: config.$space_basic;
 }
 
-%flex-column {
+%flex_column {
 	flex-direction: column;
 }
 
-%flex-row {
+%flex_row {
 	flex-direction: row;
 }
 
@@ -255,7 +255,7 @@
 	}
 }
 
-#mouse-overlay {
+#mouse_overlay {
 	@extend %viewport_fixed;
 	z-index: config.$z_heaven;
 	transition: background-color config.$duration_long config.$timing_basic config.$duration_long;
diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss
index 3fcb838..c899989 100644
--- a/modules/io/_io_module.scss
+++ b/modules/io/_io_module.scss
@@ -78,13 +78,13 @@ aside {
 header,
 footer {
 	&.io {
-		@extend %flex-inline;
+		@extend %flex_inline;
 		align-items: stretch;
 	}
 }
 
 table .io nav {
-	@extend %flex-inline;
+	@extend %flex_inline;
 	flex-wrap: nowrap;
 	align-items: stretch;
 

From b42c8cdd7e29aff34a108266a72a1be603145984 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 17 Mar 2026 00:33:37 +0100
Subject: [PATCH 3/3] feat: Change table io

---
 modules/io/_io_module.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss
index c899989..1804ea2 100644
--- a/modules/io/_io_module.scss
+++ b/modules/io/_io_module.scss
@@ -83,12 +83,18 @@ footer {
 	}
 }
 
-table .io nav {
-	@extend %flex_inline;
-	flex-wrap: nowrap;
-	align-items: stretch;
+table {
+	.io nav {
+		@extend %flex_inline;
+		flex-wrap: nowrap;
+		align-items: stretch;
 
-	button {
-		margin: config.$margin_io;
+		button {
+			margin: config.$margin_io;
+		}
+	}
+
+	.io:last-child nav {
+		justify-content: flex-end;
 	}
 }
\ No newline at end of file