Update grid elements

resources/css/main.css

@@ -127,7 +127,7 @@ tr:hover {
   margin: auto;
 }
 
-.center > :not(table) {
+.center >  {
   display: block;
 }
 
@@ -163,6 +163,7 @@ tr:hover {
 }
 
 .textboxGrid * {
+  display: auto;
   size: 100%;
   margin: 0px;
   padding: 30px 0px;
@@ -170,8 +171,15 @@ tr:hover {
   background-color: #787878;
 }
 
-.textboxGrid .linkGridElement {
+.textboxGrid .gridElement, .textboxGrid .linkGridElement {
   border: 1px solid black;
+  overflow-wrap: break-word;
+}
+
+.textboxGrid .gridElement *, .textboxGrid .linkGridElement * {
+  margin: 3px;
+  padding: 0px 30px;
+  background-color: transparent;
 }
 
 .textboxGrid .linkGridElement:hover {
@@ -184,8 +192,6 @@ tr:hover {
   color: #66D9EF;
 }
 
-.textboxGrid .linkGridElement * {
-  margin: 0px;
-  padding: 0px;
-  background-color: transparent;
+.hoverable:hover {
+  background-color: rgba(0, 0, 0, 0.2);
 }

resources/css/scss/_classes.scss

@@ -9,7 +9,7 @@
   
   * { margin: auto;}
 
-    &>:not(table){ display: block;}
+  &>:not(table, .textboxGrid){ display: block;}
 
   canvas {
     border: 5px solid black;
@@ -40,6 +40,7 @@
   }
 
   * {
+    display: auto;
 
     size: 100%;
     margin: 0px;
@@ -50,8 +51,20 @@
 
   }
 
-    .linkGridElement {
+  .gridElement {
+
     border: 1px solid black;
+    overflow-wrap: break-word;
+
+    * {
+      margin: 3px;
+      padding: 0px 30px;
+      background-color: transparent;
+    }
+  }
+
+  .linkGridElement {
+    @extend .gridElement;
 
     &:hover {
       background-color: $grey3;
@@ -62,12 +75,11 @@
       text-decoration: underline;
       color: $linkStill;
     }
-
-        * {
-            margin: 0px;
-            padding: 0px;
-            background-color: transparent;
+  }
 }
 
+.hoverable {
+  &:hover {
+    background-color: rgba($color: #000000, $alpha: 0.2);
   }
 }