From d3b48b071c2e70813825a4e52fcf7680c968ccc3 Mon Sep 17 00:00:00 2001
From: anishTP <119032387+anishTP@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:45:55 +0530
Subject: [PATCH] Fixed the project header right column width to prevent layout
 shift (#2081)

* Fixed the project header right column width to prevent layout shift

* Fix two column layout of project header

---------

Co-authored-by: Vidya Ramakrishnan <vidya@hasgeek.in>
---
 funnel/assets/sass/pages/project.scss | 11 ++++++-----
 funnel/templates/project.html.jinja2  |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/funnel/assets/sass/pages/project.scss b/funnel/assets/sass/pages/project.scss
index e7e8b7569..41b17ddbb 100644
--- a/funnel/assets/sass/pages/project.scss
+++ b/funnel/assets/sass/pages/project.scss
@@ -386,7 +386,6 @@
         .calendar__weekdays .calendar__weekdays__dates--latest {
           display: flex;
           margin-bottom: $mui-grid-padding * 0.5;
-          font-weight: 600;
         }
 
         .calendar__weekdays .calendar__weekdays__dates:last-child {
@@ -425,6 +424,7 @@
 @media (min-width: 768px) {
   .project-banner {
     display: flex;
+    gap: $mui-grid-padding * 2;
     .project-banner__box {
       .project-banner__box__add-btn {
         right: $mui-grid-padding;
@@ -452,14 +452,15 @@
       }
     }
     .project-banner__left {
-      width: 67%;
-      margin: 0 $mui-grid-padding * 2 0 0;
+      flex: 1 1 auto;
+      margin: 0;
+      min-width: 0;
       .embed-video-wrapper--shaped {
         border-radius: 16px;
       }
     }
     .project-banner__right {
-      width: auto;
+      width: 420px;
     }
   }
   .project-banner.project-banner--inner {
@@ -467,7 +468,7 @@
       width: 25%;
     }
     .project-banner__right--smaller {
-      width: auto;
+      width: 75%;
     }
   }
 }
diff --git a/funnel/templates/project.html.jinja2 b/funnel/templates/project.html.jinja2
index 70a469e32..a85630eac 100644
--- a/funnel/templates/project.html.jinja2
+++ b/funnel/templates/project.html.jinja2
@@ -177,7 +177,7 @@
   {%- endif %}
 
   {%- if project.subprojects or project.parent_project %}
-    <div>
+    <div id="related-events">
       <h3 class="mui--text-left left-padding">{% trans %}Related events{% endtrans %}</h3>
       {%- if project.subprojects %}
       <ul class="grid">