From 7fe5a6986b4cd360e4ff031608e191731cbafb04 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:18:54 +0200
Subject: [PATCH] UX: fullscreen modal > add missing modifier + sticky header
 (#24920)

* UX: table builder add missing modal modifier

* UX: fullscreen-table sticky header fix

* UX: fullscreen table > autosize width
---
 .../app/components/modal/fullscreen-table.hbs |  2 +-
 .../stylesheets/common/base/topic-post.scss   | 57 +++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs b/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
index ac969bc2948..04df9c20b60 100644
--- a/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
@@ -1,7 +1,7 @@
 <DModal
   @title={{i18n "fullscreen_table.view_table"}}
   @closeModal={{@closeModal}}
-  class="fullscreen-table-modal"
+  class="fullscreen-table-modal -max"
 >
   <:body>
     {{@model.tableHtml}}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index f9b18b138e6..30e0d4ae1ef 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1690,3 +1690,60 @@ iframe {
     right: 0.5rem;
   }
 }
+
+.fullscreen-table-modal .modal-inner-container,
+.fullscreen-code-modal .modal-inner-container {
+  width: max-content;
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 10px;
+
+  .modal-body {
+    padding-top: 0;
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--secondary);
+  }
+
+  tbody {
+    overflow-x: hidden;
+  }
+
+  td {
+    padding: 0.5rem;
+  }
+}
+
+.fullscreen-code-modal {
+  pre code {
+    max-width: none;
+  }
+}
+
+.fullscreen-table-modal {
+  .d-modal__container {
+    width: auto;
+  }
+  .d-modal__body {
+    padding-top: 0;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background-color: var(--secondary);
+    }
+  }
+}
+
+html.discourse-no-touch .fullscreen-table-wrapper:hover {
+  border-radius: 5px;
+  box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
+    0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
+  .open-popup-link {
+    opacity: 100%;
+  }
+}