Fix: Bug and Responsiveness (#849)

* fixed button bug and team responsiveness

* lint fix

* found the real issue...

Author: pegifenu

.gitignore

@@ -24,6 +24,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.vscode
+
 # next.js
 /.next/
 /out/

components/ActiveLink.js

@@ -13,6 +13,21 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
       ? `${childClassName} ${activeClassName}`.trim()
       : childClassName;
 
+  // check if it's an external link
+  if (props.href.startsWith('http')) {
+    return (
+      <a
+        href={props.href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {cloneElement(child, {
+          className: className || null,
+        })}
+      </a>
+    );
+  }
+
   return (
     //clones child with className if className exists
     (<Link {...props} legacyBehavior>

styles/components/Navbar.scss

@@ -97,6 +97,11 @@ $committees: (studio,variables.$studio-raspberry),
       margin: 0;
       padding: 0;
 
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+
       button {
         background-color: transparent;
         border: 0;

styles/pages/committees.scss

@@ -169,13 +169,12 @@ html {
 
 .officers-body-wrapper {
   margin: 50px auto 40px;
-  display: flex;
-  justify-content: center;
 
   .officers-card-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Ensures responsive behavior */
+    grid-template-columns: repeat(auto-fit, 280px); /* Ensures responsive behavior */
     gap: 3em;
-    max-width: 100%;
+    width: 100%;
+    justify-content: center;
   }
 }