fixing a scrollbar issue with the social media feed

Author: chrisorban

docs/calendar.html

@@ -41,7 +41,7 @@
 <link href="site_libs/quarto-html/quarto-syntax-highlighting-587c61ba64f3a5504c4d52d930310e48.css" rel="stylesheet" id="quarto-text-highlighting-styles">
 <script src="site_libs/bootstrap/bootstrap.min.js"></script>
 <link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
-<link href="site_libs/bootstrap/bootstrap-784cc24b6735f4fbd54fe98f47f34423.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
+<link href="site_libs/bootstrap/bootstrap-c6a99d134d1fc7537dbf908e3f4db267.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
 <script id="quarto-search-options" type="application/json">{
   "location": "navbar",
   "copy-button": false,

docs/index.html

@@ -183,8 +183,8 @@ <h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Wel
 
   /* Container to make the feed scrollable */
   .feed-container {
-    height: 2000px;
-    overflow-y: scroll !important; /* Force scrollbar */
+    height: calc(100vh - 300px); /* Responsive height to avoid page scroll */
+    overflow-y: auto !important; /* Show scrollbar if feed is long */
     overscroll-behavior: contain;
     border: 1px solid #ccc;
     border-radius: 8px;

docs/people.html

@@ -41,7 +41,7 @@
 <link href="site_libs/quarto-html/quarto-syntax-highlighting-587c61ba64f3a5504c4d52d930310e48.css" rel="stylesheet" id="quarto-text-highlighting-styles">
 <script src="site_libs/bootstrap/bootstrap.min.js"></script>
 <link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
-<link href="site_libs/bootstrap/bootstrap-784cc24b6735f4fbd54fe98f47f34423.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
+<link href="site_libs/bootstrap/bootstrap-c6a99d134d1fc7537dbf908e3f4db267.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
 <script id="quarto-search-options" type="application/json">{
   "location": "navbar",
   "copy-button": false,

docs/styles.css

@@ -4,7 +4,8 @@
 #quarto-margin-sidebar {
     width: 400px !important;
     min-width: 400px !important;
-    overflow: hidden !important; /* Hide scrollbars */
+    overflow-y: auto !important;
+    /* Show scrollbars if needed */
 }
 
 /* Adjust the main content area to accommodate wider sidebar */
@@ -17,9 +18,10 @@
     #quarto-margin-sidebar {
         width: 400px !important;
         min-width: 400px !important;
-        overflow: hidden !important; /* Hide scrollbars */
+        overflow-y: auto !important;
+        /* Show scrollbars if needed */
     }
-    
+
     .page-columns .page-full {
         grid-template-columns: 1fr 500px !important;
     }
@@ -29,18 +31,4 @@
 .margin-sidebar-content iframe {
     width: 100% !important;
     max-width: none !important;
-}
-
-/* Hide scrollbars for the entire sidebar content */
-#quarto-margin-sidebar, 
-#quarto-margin-sidebar * {
-    overflow: hidden !important;
-    scrollbar-width: none !important; /* Firefox */
-    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
-}
-
-/* Hide scrollbars for webkit browsers (Chrome, Safari, Edge) */
-#quarto-margin-sidebar::-webkit-scrollbar,
-#quarto-margin-sidebar *::-webkit-scrollbar {
-    display: none !important;
-}
+}

index.qmd

@@ -50,8 +50,8 @@ We hope you enjoy this site! Check out our [Social Media Feed](feed.qmd) to see
 
   /* Container to make the feed scrollable */
   .feed-container {
-    height: 2000px;
-    overflow-y: scroll !important; /* Force scrollbar */
+    height: calc(100vh - 300px); /* Responsive height to avoid page scroll */
+    overflow-y: auto !important; /* Show scrollbar if feed is long */
     overscroll-behavior: contain;
     border: 1px solid #ccc;
     border-radius: 8px;

styles.css

@@ -4,7 +4,8 @@
 #quarto-margin-sidebar {
     width: 400px !important;
     min-width: 400px !important;
-    overflow: hidden !important; /* Hide scrollbars */
+    overflow-y: auto !important;
+    /* Show scrollbars if needed */
 }
 
 /* Adjust the main content area to accommodate wider sidebar */
@@ -17,9 +18,10 @@
     #quarto-margin-sidebar {
         width: 400px !important;
         min-width: 400px !important;
-        overflow: hidden !important; /* Hide scrollbars */
+        overflow-y: auto !important;
+        /* Show scrollbars if needed */
     }
-    
+
     .page-columns .page-full {
         grid-template-columns: 1fr 500px !important;
     }
@@ -29,18 +31,4 @@
 .margin-sidebar-content iframe {
     width: 100% !important;
     max-width: none !important;
-}
-
-/* Hide scrollbars for the entire sidebar content */
-#quarto-margin-sidebar, 
-#quarto-margin-sidebar * {
-    overflow: hidden !important;
-    scrollbar-width: none !important; /* Firefox */
-    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
-}
-
-/* Hide scrollbars for webkit browsers (Chrome, Safari, Edge) */
-#quarto-margin-sidebar::-webkit-scrollbar,
-#quarto-margin-sidebar *::-webkit-scrollbar {
-    display: none !important;
-}
+}