From 24af69fb9fb9e49d382f8ee15e38db374ba8ee1c Mon Sep 17 00:00:00 2001
From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com>
Date: Fri, 16 Feb 2024 17:04:31 +0100
Subject: [PATCH] feat: Update css breakpoints value - MEED-3346 -
 Meeds-io/MIPs#113 (#737)

This PR changes the CSS breakpoints value

(cherry picked from commit 16cb2d5d1c45223f1819122bbc43e7317384a4b4)
---
 .../src/main/webapp/skin/less/variables.less   | 17 ++++++++---------
 .../webapp/skin/less/vuetify/lib/vuetify.less  | 18 +++++++++---------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/platform-ui-skin/src/main/webapp/skin/less/variables.less b/platform-ui-skin/src/main/webapp/skin/less/variables.less
index 057e49fde..728254278 100644
--- a/platform-ui-skin/src/main/webapp/skin/less/variables.less
+++ b/platform-ui-skin/src/main/webapp/skin/less/variables.less
@@ -419,15 +419,14 @@
 // RESPONSIVE
 // --------------------------------------------------
 @smallMobileWidth: 380px;
-@maxMobileWidth: 767px;
-@minTabletWidth: (@maxMobileWidth + 1px);
-@maxTabletWidth: 979px;
-@minLargeTabletWidth: (@maxTabletWidth + 1px);
-@maxLargeTabletWidth: 1023px;
-@minDesktop: (@maxLargeTabletWidth + 1px);
-@maxDesktop: 1279px;
-@minLargeDesktop: (@maxDesktop + 1px);
-@maxLargeDesktop: 1700px;
+@maxMobileWidth: 599.98px;
+@minTabletWidth: (@maxMobileWidth + 0.02px);
+@maxTabletWidth: 959.98px;
+@minLargeTabletWidth: (@maxTabletWidth + 0.02px);
+@maxLargeTabletWidth: 1263.98px;
+@minDesktop: (@maxLargeTabletWidth + 0.02px);
+@maxDesktop: 1903.98px;
+@minLargeDesktop: (@maxDesktop + 0.02px);
 
 // Default 940px grid
 // -------------------------
diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less
index 73b195c20..c211107aa 100644
--- a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less
+++ b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less
@@ -3790,27 +3790,27 @@ html.overflow-y-hidden {
     display: none !important;
   }
 }
-@media only screen and (min-width: @minTabletWidth) and (max-width: 1263px) {
+@media only screen and (min-width: @minLargeTabletWidth) and (max-width: @maxLargeTabletWidth) {
   .v-application .hidden-md-only {
     display: none !important;
   }
 }
-@media only screen and (max-width: 1263px) {
+@media only screen and (max-width: @maxLargeTabletWidth) {
   .v-application .hidden-md-and-down {
     display: none !important;
   }
 }
-@media only screen and (min-width: @minTabletWidth) {
+@media only screen and (min-width: @minLargeTabletWidth) {
   .v-application .hidden-md-and-up {
     display: none !important;
   }
 }
-@media only screen and (min-width: @minDesktop) and (max-width: 1903px) {
+@media only screen and (min-width: @minDesktop) and (max-width: @maxDesktop) {
   .v-application .hidden-lg-only {
     display: none !important;
   }
 }
-@media only screen and (max-width: 1903px) {
+@media only screen and (max-width: @maxDesktop) {
   .v-application .hidden-lg-and-down {
     display: none !important;
   }
@@ -21432,7 +21432,7 @@ html.overflow-y-hidden {
 .v-bottom-sheet.v-dialog.v-bottom-sheet--inset {
   max-width: 70%;
 }
-@media only screen and (max-width: 599px) {
+@media only screen and (max-width: @maxMobileWidth) {
   .v-bottom-sheet.v-dialog.v-bottom-sheet--inset {
     max-width: none;
   }
@@ -24910,7 +24910,7 @@ html.overflow-y-hidden {
     margin-right: 0%;
   }
 }
-@media all and (min-width: @minTabletWidth) {
+@media all and (min-width: @minLargeTabletWidth) {
   .flex.md12 {
     flex-basis: 100%;
     flex-grow: 0;
@@ -25580,7 +25580,7 @@ html.overflow-y-hidden {
   margin-right: auto;
   margin-left: auto;
 }
-@media (min-width: @minTabletWidth) {
+@media (min-width: @minLargeTabletWidth) {
   .container {
     max-width: 900px;
   }
@@ -25940,7 +25940,7 @@ html.overflow-y-hidden {
     margin-right: 91.6666666667%;
   }
 }
-@media (min-width: @minTabletWidth) {
+@media (min-width: @minLargeTabletWidth) {
   .col-md {
     flex-basis: 0;
     flex-grow: 1;