minor improvements

Signed-off-by: Maximilian Inckmann <[email protected]>

Author: maximiliani

src/main.ts

@@ -386,7 +386,6 @@ class MappingInputProvider extends HTMLElement {
         descWrapper.classList.add('description');
         descWrapper.appendChild(document.createElement('br'));
         const scrollSpan = document.createElement('span');
-        scrollSpan.setAttribute('style', 'display:inline-block; overflow: auto; height: 10rem;');
         scrollSpan.textContent = mapping.description ?? '';
         descWrapper.appendChild(scrollSpan);
         const buttonEl = document.createElement('button');

src/style.css

@@ -12,6 +12,7 @@
     --text-white: #ffffff;
     --background-primary: #d9eaea;
     --background-secondary: #fdfdfd;
+    --grid-element-min-width: 15rem;
 
     font-family: sans-serif;
     font-size: medium;
@@ -85,15 +86,17 @@ button[disabled|='true'] {
     background-color: var(--primary-color);
     color: var(--text-white);
     width: 100%;
-    height: 2rem;
+    height: fit-content;
     justify-content: center;
 }
 
 .title {
-    text-overflow: ellipsis;
     font-size: large;
     font-weight: bold;
     display: flex;
+    margin: 0.375rem;
+    flex: 1 0 calc(var(--grid-element-min-width) - 2*0.4rem);
+    line-break: auto;
     align-items: center; /* Vertical centering */
     justify-content: center; /* Horizontal centering */
     height: 100%; /* Ensure the div has height */
@@ -150,10 +153,14 @@ button[disabled|='true'] {
 }
 
 .description {
+    /*flex: 0 1 auto;*/
     color: var(--deactivated-color) !important;
-    margin: 0.5rem;
+    padding: 0.5rem;
+    display: inline-block;
     text-align: justify;
-    overflow-y: auto;
+    overflow-x: auto;
+    height: calc(var(--grid-element-min-width)/3 + 1rem);
+    margin-bottom: var(--margin-around);
 }
 
 .mapping-options {
@@ -176,14 +183,14 @@ button[disabled|='true'] {
     grid-auto-columns: min-content;
     grid-auto-flow: row;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-element-min-width), 1fr));
     width: 100%;
     margin: var(--margin-around);
     padding-bottom: 0.625rem;
 }
 
 .cards {
-    flex: 0 0 calc(25% - var(--padding-around));
+    flex: 0 1 calc(20% - var(--padding-around));
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
@@ -195,7 +202,7 @@ button[disabled|='true'] {
     border-radius: var(--border-radius);
     overflow: hidden;
     position: relative;
-    min-width: 18.5rem;
+    /*min-width: 18.5rem;*/
     /* Added minimum width for better mobile view */
     background: var(--background-primary);
     box-shadow: