Fix TOC left and right height

Author: yogeshjain999

app/assets/stylesheets/application.tailwind.css

@@ -67,4 +67,12 @@
   .display_block {
     display: block;
   }
+
+  .toc-right-height {
+    height: calc(100dvh - 10rem);
+  }
+
+  .toc-left-height {
+    height: calc(100dvh - 6rem);
+  }
 }

app/concepts/cell/documentation/toc_left.erb

@@ -1,4 +1,4 @@
-<div class="lg:pt-10 lg:pl-5 xl:pl-20 p-10 pl-20 text-white leading-10 space-y-1 h-full overflow-auto">
+<div class="lg:pt-10 lg:pl-5 xl:pl-20 p-10 pl-20 text-white leading-10 space-y-1 toc-left-height overflow-y-auto">
   <% separator_after = {4 => true, 8 => true}
       separator_class = "border-t-[1px] border-t-light-purple"
   %>

app/concepts/cell/documentation/toc_right.erb

@@ -1,4 +1,4 @@
-<div class="display_none bg-white p-5 w-56 shrink-0 text-bg-blue overflow-y-scroll top-22" id="<%= css_id %>">
+<div class="display_none bg-white p-5 w-56 shrink-0 text-bg-blue overflow-y-auto top-22 toc-right-height" id="<%= css_id %>">
   <h4 class="font-base font-bold leading-10 pl-2">
      <%= h2.title %>
   </h4>