11

src/main/resources/static/css/main.css

@@ -10185,10 +10185,45 @@ body.index-page-body {
 .api-market-container {
   max-width: 1240px;
   margin: 0 auto;
-  padding: 60px 40px;
+  padding: 0px 40px;
   display: flex;
   gap: 60px;
   align-items: flex-start;
+  width: 100%;
+}
+@media (max-width: 1024px) {
+  .api-market-container {
+    flex-direction: column;
+    gap: 30px;
+    padding: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .api-market-container .service-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 280px;
+    margin: 0;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: #ffffff;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    padding: 80px 24px 30px;
+  }
+  .api-market-container .service-sidebar.mobile-open {
+    transform: translateX(0);
+  }
+  .api-market-container .service-sidebar .service-nav {
+    flex-direction: column !important;
+    gap: 16px !important;
+    border: none !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
 }
 
 .api-market-hero {
@@ -10537,20 +10572,9 @@ body.index-page-body {
 
 .api-card-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 24px;
-  justify-content: flex-start;
+  width: 100%;
-}
-@media (max-width: 1300px) {
-  .api-card-grid {
-    grid-template-columns: repeat(2, 312px);
-  }
-}
-@media (max-width: 1024px) {
-  .api-card-grid {
-    grid-template-columns: 1fr;
-    justify-content: center;
-  }
 }
 
 .api-card {
@@ -23170,15 +23194,15 @@ body.commission-print-page .btn-primary:hover {
 }
 
 @media (max-width: 1024px) {
-  .signup-guide-v2 .service-hero {
+  .service-hero {
     padding: 40px 0;
   }
-  .signup-guide-v2 .service-hero__inner {
+  .service-hero__inner {
     flex-direction: column;
     gap: 30px;
     text-align: center;
   }
-  .signup-guide-v2 .service-hero__content {
+  .service-hero__content {
     align-items: center;
   }
   .signup-guide-v2 .signup-info-box {
@@ -23401,7 +23425,9 @@ body.commission-print-page .btn-primary:hover {
   box-sizing: border-box;
   color: #1A1A2E;
 }
-.oauth2-2legged *, .oauth2-2legged *::before, .oauth2-2legged *::after {
+.oauth2-2legged *,
+.oauth2-2legged *::before,
+.oauth2-2legged *::after {
   box-sizing: inherit;
 }
 .oauth2-2legged__prereq, .oauth2-2legged__sequence, .oauth2-2legged__step, .oauth2-2legged__errors, .oauth2-2legged__error-example {
@@ -23488,6 +23514,11 @@ body.commission-print-page .btn-primary:hover {
 .oauth2-2legged__hero-lead + .oauth2-2legged__hero-lead {
   margin-top: 4px;
 }
+@media (max-width: 768px) {
+  .oauth2-2legged__hero-lead {
+    font-size: 13px;
+  }
+}
 .oauth2-2legged__hero-chips {
   display: flex;
   gap: 12px;

src/main/resources/static/sass/pages/_api-market.scss

@@ -8,21 +8,50 @@
 // -----------------------------------------------------------------------------
 
 .api-market-container {
-  //   display: flex;
-  //   max-width: 1240px;
-  //   margin: 0 auto;
-  //   min-height: 100vh;
-  //   background-color: transparent;
-  //   position: relative;
-  //   margin-bottom: 20px;
-
-
   max-width: 1240px;
   margin: 0 auto;
-  padding: 60px 40px;
+  padding: 60px 0px;
   display: flex;
   gap: 60px;
   align-items: flex-start;
+  width: 100%;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    gap: 30px;
+    padding: 20px;
+  }
+
+  // Sidebar overrides for mobile toggle menu inside market
+  .service-sidebar {
+    @media (max-width: 768px) {
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      width: 280px;
+      margin: 0;
+      z-index: 1000;
+      transform: translateX(-100%);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: #ffffff;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+      padding: 80px 24px 30px; // Clear header height if any
+
+      &.mobile-open {
+        transform: translateX(0);
+      }
+
+      .service-nav {
+        flex-direction: column !important;
+        gap: 16px !important;
+        border: none !important;
+        padding: 0 !important;
+        box-shadow: none !important;
+        background: transparent !important;
+      }
+    }
+  }
 }
 
 // Hero Section
@@ -428,20 +457,9 @@
 // Card Grid
 .api-card-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 24px;
-  justify-content: flex-start;
+  width: 100%;
-
-  // Tablet view
-  @media (max-width: 1300px) {
-    grid-template-columns: repeat(2, 312px);
-  }
-
-  // Mobile view
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-    justify-content: center;
-  }
 }
 
 // API Card

src/main/resources/static/sass/pages/_service.scss

@@ -523,21 +523,21 @@ $service-card-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgb
 
 // Responsive
 @media (max-width: 1024px) {
+  .service-hero {
+    padding: 40px 0;
+  }
+
+  .service-hero__inner {
+    flex-direction: column;
+    gap: 30px;
+    text-align: center;
+  }
+
+  .service-hero__content {
+    align-items: center;
+  }
+
   .signup-guide-v2 {
-    .service-hero {
-      padding: 40px 0;
-    }
-
-    .service-hero__inner {
-      flex-direction: column;
-      gap: 30px;
-      text-align: center;
-    }
-
-    .service-hero__content {
-      align-items: center;
-    }
-
     .signup-info-box {
       flex-direction: column;
       padding: 20px;
@@ -850,7 +850,9 @@ $o2leg-err-fg: #a23b3b;
   box-sizing: border-box;
   color: $o2leg-text-dark;
 
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     box-sizing: inherit;
   }
 
@@ -955,6 +957,11 @@ $o2leg-err-fg: #a23b3b;
     &+& {
       margin-top: 4px;
     }
+
+
+    @include respond-to('sm') {
+      font-size: 13px;
+    }
   }
 
   &__hero-chips {
@@ -1503,6 +1510,7 @@ $o2leg-err-fg: #a23b3b;
     }
 
     &__table--errors {
+
       td:first-child,
       td:nth-child(2),
       td:nth-child(3) {

src/main/resources/templates/views/apps/apis/mainApiList.html

@@ -23,7 +23,7 @@
       </div>
     </section>
 
-    <section class="api-market-container">
+    <section class="container api-market-container">
 
       <!-- Sidebar Navigation -->
       <aside class="service-sidebar" id="apiSidebar">