From 16ee0ca93475bd9408220c60fd621f0c22282e55 Mon Sep 17 00:00:00 2001
From: mfo <mfo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:08:23 +0100
Subject: [PATCH] fix(table): adjust border size depending on devicePixelRatio
 [which depends on page zoom level] so we do not lose table cell borders

---
 .../fix_table_border_controller.ts            | 20 +++++++++++++++++++
 app/views/layouts/application.html.haml       |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/fix_table_border_controller.ts

diff --git a/app/javascript/controllers/fix_table_border_controller.ts b/app/javascript/controllers/fix_table_border_controller.ts
new file mode 100644
index 000000000..d6b77e907
--- /dev/null
+++ b/app/javascript/controllers/fix_table_border_controller.ts
@@ -0,0 +1,20 @@
+import { ApplicationController } from './application_controller';
+
+export class FixTableBorderController extends ApplicationController {
+  connect() {
+    const pixelSize = Math.round((1 / window.devicePixelRatio) * 100) / 100;
+
+    // Safari does not support devicePixelRatio
+    if (navigator.userAgent.indexOf('Safari') > -1) {
+      return;
+    }
+
+    const fix = document.createElement('style');
+    fix.innerText = `
+      .fr-table.fr-table--bordered .fr-table__content th,
+      .fr-table.fr-table--bordered .fr-table__content td {
+        background-size: 100% ${pixelSize}px, ${pixelSize}px 100%}
+    }`;
+    document.body.appendChild(fix);
+  }
+}
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 91fc4699e..ca2847296 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -31,7 +31,7 @@
     = yield(:invisible_captcha_styles)
     = render partial: 'layouts/setup_theme'
 
-  %body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input' } }.compact }
+  %body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input fix-table-border' } }.compact }
     = render partial: 'layouts/skiplinks'
     = render partial: 'layouts/display_theme_modal'