From a061d45494aae8eb7dd77027bbfec7a6ad39e958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Tue, 16 Apr 2024 15:29:51 +0100
Subject: [PATCH] web: Overrides few rules for PF/Table headers

To avoid cutting headers just because they content a space in their
content.
---
 web/src/assets/styles/blocks.scss                    | 7 -------
 web/src/assets/styles/patternfly-overrides.scss      | 5 +++++
 web/src/components/storage/ProposalResultSection.jsx | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index 9bf8faff5c..85f543d7ef 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -471,16 +471,9 @@ ul[data-type="agama/list"][role="grid"] {
 
 table[data-type="agama/tree-table"] {
   th:first-child {
-    block-size: fit-content;
     padding-inline-end: var(--spacer-normal);
   }
 
-  th.fit-content {
-    block-size: fit-content;
-    overflow: visible;
-    text-overflow: unset;
-  }
-
   /**
    * Temporary PF/Table overrides for small devices
    **/
diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 9127b55a5b..71040a7797 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -263,6 +263,11 @@ ul {
   border-block-end: 0;
 }
 
+.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > th {
+  white-space: normal;
+  vertical-align: middle;
+}
+
 @media screen and (width <= 768px) {
   .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
     padding-inline: 0;
diff --git a/web/src/components/storage/ProposalResultSection.jsx b/web/src/components/storage/ProposalResultSection.jsx
index 984573fe98..741a5c6c4a 100644
--- a/web/src/components/storage/ProposalResultSection.jsx
+++ b/web/src/components/storage/ProposalResultSection.jsx
@@ -186,7 +186,7 @@ const DevicesTreeTable = ({ devicesManager }) => {
     <TreeTable
       columns={[
         { title: _("Device"), content: renderDeviceName },
-        { title: _("Mount Point"), content: renderMountPoint, classNames: "fit-content" },
+        { title: _("Mount Point"), content: renderMountPoint },
         { title: _("Details"), content: renderDetails, classNames: "details-column" },
         { title: _("Size"), content: renderSize, classNames: "sizes-column" }
       ]}