fix: cut off overflow-menu in table cells (#106)

* chore: template simplification

we obviously only need the condition around the table cell head element

* feat: providing a table overflow-menu usage example

* chore: be more sensible on the included components regarding setting overflow

Author: mfranzke

.github/workflows/default.yml

@@ -4,8 +4,8 @@ on:
   pull_request:
   push:
     branches:
-      - 'main'
-      - 'dbux-3'
+      - "main"
+      - "dbux-3"
 
 jobs:
   init:
@@ -26,7 +26,7 @@ jobs:
   build:
     uses: ./.github/workflows/01-build.yml
     needs: [init]
-    
+
   checks-done:
     runs-on: ubuntu-latest
     steps:

source/_patterns/02-components/overflow-menu/overflow-menu.hbs

@@ -1,4 +1,4 @@
-<details class="{{ patternName }}{{ styleModifier }}"{{#if linkEntries }} role="navigation"{{/if }}{{#if oppositePosition}} data-horizontal-position="opposite"{{/if }}>
+<details class="{{#if patternName }}{{ patternName }}{{else}}cmp-overflow-menu{{/if }}{{ styleModifier }}"{{#if linkEntries }} role="navigation"{{/if }}{{#if oppositePosition}} data-horizontal-position="opposite"{{/if }}>
 	<summary>{{ summary }}</summary>
 	{{#if linkEntries }}<ul role="group">{{else}}<menu type="toolbar">{{/if }}
 		{{#if linkEntries }}

source/_patterns/02-components/overflow-menu/overflow-menu.json

@@ -1,5 +1,4 @@
 {
-	"patternName": "cmp-overflow-menu",
 	"id": "menu01",
 	"entry01": "Modify",
 	"entry02": "Delete",

source/_patterns/02-components/overflow-menu/overflow-menu~opposite-position.json

@@ -1,5 +1,4 @@
 {
-	"patternName": "cmp-overflow-menu",
 	"id": "menu04",
 	"entry01": "Modify",
 	"entry02": "Delete",

source/_patterns/02-components/table/table.hbs

@@ -21,6 +21,7 @@
 				{{#if ../rowtitle }}<th scope="row">table header</th>{{/if }}
 				<td{{#if @first }}{{#if ../icon}} data-icon="{{ ../icon }}"{{/if }}{{/if }}>{{{ text01 }}}</td>
 				<td>{{{ text02 }}}</td>
+				{{#if ../overflowMenu }}<td>{{> components-overflow-menu entry01="Edit" entry02="Delete" }}</td>{{/if }}
 			</tr>
 		{{/each }}
 	</tbody>

source/_patterns/02-components/table/table.scss

@@ -43,8 +43,11 @@
 		vertical-align: inherit;
 
 		&:hover {
-			overflow: auto;
 			resize: horizontal;
+
+			&:not(:has(.cmp-overflow-menu)) {
+				overflow: auto;
+			}
 		}
 	}
 

source/_patterns/02-components/table/table~overflow-menu.json

@@ -0,0 +1,3 @@
+{
+	"overflowMenu": true
+}