From beadcf8081bf5cf233bd3de5d4236dbccb5bc276 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Sun, 19 Jun 2022 19:41:18 +0530
Subject: [PATCH] resposive right side added

---
 src/frontend/styles/components/aside.pcss | 10 ++++----
 src/frontend/styles/layout.pcss           | 12 +++-------
 src/frontend/styles/vars.pcss             | 29 ++++++++++++++++-------
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/frontend/styles/components/aside.pcss b/src/frontend/styles/components/aside.pcss
index a74b2e3..f5f7fe9 100644
--- a/src/frontend/styles/components/aside.pcss
+++ b/src/frontend/styles/components/aside.pcss
@@ -106,13 +106,13 @@
 }
 
 .table-of-content {
-  padding-left: 22px;
   border-left: solid 1px var(--color-line-gray);
-  font-size: 14px;
-  letter-spacing: 0.01em;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background: red;
+  letter-spacing: 0.01em;
+  font-size: 14px;
   width: 100%;
+  /*dummy values*/
+  background: var(--color-line-gray);
+  height: 300px;
 }
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index 36cfd03..fcf4d0d 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -5,7 +5,7 @@
 
   &__aside {
     width: var(--layout-width-aside);
-    padding: 0px 22px;
+    padding: 0px var(--layout-padding-horizontal-aside);
     border-right: solid 1px var(--color-line-gray);
     position: fixed;
     top: var(--layout-height-header);
@@ -37,17 +37,11 @@
   }
 
   &__aside-right {
-    padding-left: var(--layout-right-aside-padding-left);
-    padding-bottom: 30px;
     position: fixed;
     top: var(--layout-height-header);
     right: 0;
-    width: calc(
-      var(--layout-width-right-aside)-var(--layout-right-aside-padding-left)
-    );
-    max-width: calc(
-      var(--layout-width-right-aside)-var(--layout-right-aside-padding-left)
-    );
+    width: var(--layout-width-aside-right);
+    max-width: var(--layout-width-aside-right);
   }
 
   &__aside,
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index 5330869..5069e4c 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -26,25 +26,35 @@
   --layout-padding-vertical: 30px;
 
   --layout-width-aside: 300px;
+  --layout-padding-horizontal-aside: 22px;
+
   --layout-width-main-col: 650px;
 
-  --layout-width-aside-right-title: 277px;
-  --layout-right-aside-resposive-width: 160px;
-  --layout-width-right-aside-available: calc(
-    50% - var(--layout-width-main-col) / 2 -
-      var(--layout-right-aside-resposive-width)
+  --layout-max-width-aside-right: 450px;
+  --layout-max-space-from-right-aside: 160px;
+  --layout-available-right-aside-width: calc(
+    50% - var(--layout-width-main-col) / 2
   );
-  --layout-width-right-aside: max(
-    320px,
-    var(--layout-width-right-aside-available)
+
+  --layout-width-aside-right: min(
+    var(--layout-available-right-aside-width),
+    var(--layout-max-width-aside-right)
   );
-  --layout-right-aside-padding-left: 30px;
 
   --layout-height-header: 57px;
 
+  @media (--extrem-wide-desktop) {
+    --layout-width-aside-right: calc(
+      var(--layout-available-right-aside-width)-var(
+          --layout-max-space-from-right-aside
+        )
+    );
+  }
+
   @media (--mobile) {
     --layout-padding-horizontal: 15px;
     --layout-padding-vertical: 15px;
+    --layout-width-aside-right: 0px;
   }
 
   --font-mono: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -89,6 +99,7 @@
 /**
 * Custom media queries
 */
+@custom-media --extrem-wide-desktop all and (min-width: 1710px);
 @custom-media --wide-desktop all and (min-width: 1300px);
 @custom-media --desktop all and (min-width: 1050px);
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);