From 0c4ec2a25021b4c056590e9d1e3c25810d25136f Mon Sep 17 00:00:00 2001
From: Viktoriia Krasnovyd <114735598+vkrasnovyd@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:58:27 +0100
Subject: [PATCH] Fix time menu click area (#4125)

---
 .../speaking-times.component.scss             | 36 ++++++++++++++-----
 .../autopilot/autopilot.component.scss        |  5 +++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
index 9bfa685e8a..e5efc1c71e 100644
--- a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
+++ b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
@@ -1,23 +1,43 @@
+@import 'src/assets/styles/variables.scss';
+
 .structure-level-list {
-    display: flex;
-    flex-wrap: wrap;
+    $auto-sizing: auto-fill;
+    $column-min-width: 186px;
+
     justify-content: start;
     padding: 8px 25px 0 25px;
+    display: grid;
+    column-gap: 16px;
+    grid-template-columns: repeat($auto-sizing, minmax($column-min-width, max-content));
+
+    @media (max-width: 1383px) {
+        $auto-sizing: auto-fit;
+    }
+
+    @include phone {
+        $column-min-width: 159px;
+        padding: 0;
+        margin-right: -20px;
+        column-gap: 5px;
+    }
+
     .structure-level {
-        min-width: 33%;
         margin-bottom: 16px;
         display: flex;
         flex-direction: row;
         justify-content: end;
+        width: min(222px, 100%);
 
-        .structure-level-content {
-            width: 100%;
+        @include phone {
+            width: min(186px, 100%);
+        }
 
+        .structure-level-content {
             .structure-level-color {
                 height: 3px;
                 background-color: transparent;
-                margin-left: 10%;
-                width: calc(100% - margin-left);
+                margin-right: 0;
+                width: 111px;
                 border-width: 0;
                 border-radius: 7px;
             }
@@ -32,11 +52,11 @@
             .structure-level-name {
                 line-height: 1;
                 text-align: right;
+                word-break: break-word;
             }
         }
 
         .icon-less-space-to-left {
-            width: 25px;
             margin-top: 12px;
         }
     }
diff --git a/client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.scss b/client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.scss
index dbd5b3e805..5b92fdc1b2 100644
--- a/client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.scss
+++ b/client/src/app/site/pages/meetings/pages/autopilot/components/autopilot/autopilot.component.scss
@@ -36,4 +36,9 @@
             max-width: 1320px;
         }
     }
+    @media (min-width: 1050px) and (max-width: 1440px) {
+        .col-right {
+            max-width: 304px;
+        }
+    }
 }