handle overflow in cells

diff --git a/public/trivabble.css b/public/trivabble.css
index 711af9652f3ba8ba1df664b0bb3be9197ee66be5..937b92797e770f2d02d412d287fb18dd95c3633c 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -122,6 +122,8 @@ html, #board, [draggable], .tile {
     display:inline-block;
     white-space:pre-wrap;
     font-size:7px;
+    text-overflow:ellipsis;
+    overflow:hidden;
 }
 
 #center-cell .special-cell-label {
@@ -186,8 +188,10 @@ button {
 }
 
 #board td {
+    width:32px;
     height:32px;
-    width: 32px;
+    max-width:32px;
+    max-height:32px;
 }
 
 #rack .tile-placeholder {

diff --git a/public/trivabble.js b/public/trivabble.js
index 2d75605da82cb1064672501def9aca5e366ea67f..fb2f2ac401509fd70e258690425bcde2616cd39b 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1491,7 +1491,7 @@
         cell.firstChild.appendChild(document.createElement("span"));
         cell.classList.add("special-cell");
         cell.classList.add("special-cell-" + type);
-        cell.lastChild.lastChild.textContent = _(specialTypesText[type]);
+        cell.lastChild.lastChild.textContent = cell.title =  _(specialTypesText[type]);
         cell.lastChild.lastChild.className = "special-cell-label";
     }