feat: Change table io

- Add variant with flex row
- Change style to be dependant

elements/_grouping.scss

@@ -302,7 +302,7 @@ div {
 	display: flex;
 
 	&.inline {
-		@extend %flex-inline;
+		@extend %flex_inline;
 	}
 
 	&.stretch {

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,

elements/_tables.scss

@@ -39,7 +39,7 @@ table {
 		border: config.$width_border_basic solid transparent;
 	}
 
-	&.stripe {
+	&.striped {
 		td {
 			border-top: 0;
 			border-bottom: 0;
@@ -54,8 +54,21 @@ table {
 		table-layout: fixed;
 	}
 
-	&.table_file_simple {
-		@extend .width_full;
+	&.flexible {
+		tr {
+			display: flex;
+			flex-flow: row nowrap;
+			align-items: stretch;
+
+			&:last-child td {
+				border-bottom: none;
+			}
+
+			td.truncate {
+				flex: 1;
+				min-width: 0;
+			}
+		}
 	}
 
 	&.draggable tbody tr {
@@ -192,6 +205,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 +232,6 @@ td {
 	}
 
 	&.ellipsis {
-		width: 100%;
-		max-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -234,7 +251,6 @@ td {
 			max-height: 44px;
 		}
 	}
-
 }
 
 td:last-child {
@@ -244,9 +260,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);
-}

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;

modules/io/_io_module.scss

@@ -78,17 +78,23 @@ aside {
 header,
 footer {
 	&.io {
-		@extend %flex-inline;
+		@extend %flex_inline;
 		align-items: stretch;
 	}
 }
 
-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;
 	}
 }