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 <[email protected]>
hasgeek · Jul 2, 2024 · d3b48b0 · d3b48b0
1 parent 5975d98
commit d3b48b0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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,22 +452,23 @@
       }
     }
     .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 {
     .project-banner__left--smaller {
       width: 25%;
     }
     .project-banner__right--smaller {
-      width: auto;
+      width: 75%;
     }
   }
 }

diff --git 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">