From d9fc7837fe6bedf233a5665e1c81011d7f0af12c Mon Sep 17 00:00:00 2001
From: Venla <venla.e.rantanen@helsinki.fi>
Date: Wed, 23 Oct 2024 15:12:20 +0300
Subject: [PATCH] fixes to form 8 table ui, tweaks

---
 .../FacultyMonitoringOverview.scss            | 69 ++++++++++---------
 .../MonitoringOverview.js                     |  2 +-
 .../FacultyMonitoringOverview/index.js        |  2 +-
 client/components/Generic/Square.js           |  5 +-
 4 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/FacultyMonitoringOverview.scss b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/FacultyMonitoringOverview.scss
index c7587f94..07ea5a57 100644
--- a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/FacultyMonitoringOverview.scss
+++ b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/FacultyMonitoringOverview.scss
@@ -1,69 +1,69 @@
-.filter-row {
-  .menu-item-header {
+$base-cell-size: min(5vw, 80px);
+
+@mixin cell-scaling {
+  width: $base-cell-size;
+  min-width: $base-cell-size;
+  height: $base-cell-size;
+}
+
+.monitoring-overview {
+  width: 100%;
+
+  .filter-row .menu-item-header {
     padding-left: 0;
 
     h2 {
       max-width: 16em;
+      font-size: 1.5em;
     }
   }
-}
-
-.flex-container {
-  display: flex;
-  flex-direction: column;
-  align-self: flex-start;
-  margin-left: 15px;
-}
-
-.monitoring-overview {
-  width: 100%;
 
   .monitoring-table {
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
+    table-layout: fixed;
   }
 
   .table-header-cell {
     padding: 8px !important;
-    margin-top: 10px !important;
     text-align: left;
-    min-width: 7vw;
-    max-width: 7vw;
     word-wrap: break-word;
+
+    &:first-child {
+      width: 10vw;
+    }
+
+    &:not(:first-child) {
+      width: $base-cell-size;
+    }
+
     .faculty-header {
-      vertical-align: top !important;
-      font-size: 13px;
-      width: 100%;
+      font-size: 1em;
+      display: block;
     }
   }
 
   .pie-chart-cell,
   .square-cell {
-    width: 80px;
-    height: 80px;
+    @include cell-scaling;
     padding: 5px;
-    vertical-align: middle;
   }
 
   .pie-chart-container,
   .square-container {
-    width: 80px;
-    height: 80px;
+    @include cell-scaling;
     margin: 0 auto;
   }
 
-  .ui.table td {
-    padding: 0.7em;
-    vertical-align: middle;
-  }
-
-  .accordion-header {
+  h5.accordion-header {
     cursor: pointer;
-    margin: 15px 0 !important;
-    width: 210px;
-    overflow: visible;
     word-wrap: break-word;
+    hyphens: auto;
+    margin: 15px 0 !important;
+    font-size: 1.2em !important;
+    line-height: 1.2;
+
     &:hover {
       text-decoration: underline;
     }
@@ -71,5 +71,8 @@
 
   .question-text {
     padding: 5px 0;
+    font-size: 1em;
+    word-wrap: break-word;
+    hyphens: auto;
   }
 }
diff --git a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js
index 5a890d59..dcdafbb7 100644
--- a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js
+++ b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/MonitoringOverview.js
@@ -41,7 +41,7 @@ const MonitoringOverview = ({ t, lang, faculties }) => {
 
   const filteredFaculties = useMemo(
     () =>
-      faculties
+      (faculties || [])
         .filter(f => f.code !== 'HTEST')
         .map(f => ({
           key: f.code,
diff --git a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/index.js b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/index.js
index e2120c43..b4fdeb5b 100644
--- a/client/components/FacultyMonitoringView/FacultyMonitoringOverview/index.js
+++ b/client/components/FacultyMonitoringView/FacultyMonitoringOverview/index.js
@@ -16,7 +16,7 @@ const FacultyMonitoringOverview = () => {
   const user = useSelector(state => state.currentUser.data)
 
   const hasReadRights = (faculties, user) => {
-    const readRights = faculties.some(faculty => user.access[faculty.code]?.read)
+    const readRights = faculties?.some(faculty => user.access[faculty.code]?.read)
     return readRights || user.specialGroup?.evaluationFaculty || isAdmin(user)
   }
 
diff --git a/client/components/Generic/Square.js b/client/components/Generic/Square.js
index c249c56a..be9bc470 100644
--- a/client/components/Generic/Square.js
+++ b/client/components/Generic/Square.js
@@ -8,10 +8,11 @@ const squareStyles = {
   justifyContent: 'center',
   alignItems: 'center',
   cursor: 'pointer',
-  width: '80px',
-  height: '80px',
+  width: '100%',
+  height: '100%',
   transition: 'filter 0.3s',
   position: 'relative',
+  margin: 0,
 }
 
 const colors = {