add a workaround for a Safari bug that breaks the board sizing

js/pacosako_ui.js

@@ -1068,6 +1068,26 @@ $(function (){
       gun: gun,
       PacoSakoUUID: PacoSakoUUID,
    };
+
+   /*
+    * Safari uses the container's *height* instead of its *width* as
+    * required by W3C standards for relative margin/padding values.
+    * This breaks the CSS that should be ensuring a 1:1 aspect ratio.
+    */
+   function fixSafariPadding() {
+      let elements = $('#cb_container, #cb_board');
+      for (let element of elements) {
+         element = $(element);
+         const width = element.width();
+         const topPadding = width;
+         element.css('padding-top', topPadding + 'px');
+      }
+   }
+
+   if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+      $(window).on('resize', fixSafariPadding);
+      fixSafariPadding();
+   }
 });
 
 /* vim:set expandtab sw=3 ts=8: */