fix scroll areas and side menu

web/projects/marketplace/src/components/menu/menu.component.scss

@@ -1,11 +1,15 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+:host {
+  margin: 0;
+  padding: 0;
+}
+
 header {
   @include scrollbar-hidden();
 
-  max-height: 100%;
   // TODO: Theme
-  background: #373a3f;
+  background: #2B2B2F;
   overflow: hidden;
   width: 100%;
   position: fixed;
@@ -18,23 +22,17 @@ header {
     width: 17rem;
     background-color: rgb(var(--tw-color-zinc-700) / 0.9);
     backdrop-filter: blur(40px);
-    min-height: calc(100vh - var(--portal-header-height));
     padding: 2rem 0 1.5rem 0;
-
-    &::after {
-      display: block;
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-      width: 0.125rem;
-      content: '';
-      background-image: linear-gradient(
+    height: 100%;
+    min-height: 100%;
+    border-image: linear-gradient(
         to bottom,
         rgb(var(--tw-color-zinc-700)),
         rgb(var(--tw-color-zinc-400))
-      );
-    }
+      )
+      1;
+    border-width: 0;
+    border-right: 0.125rem solid;
   }
 
   @media screen and (min-width: 1536px) {
@@ -95,7 +93,6 @@ header {
 
       ::ng-deep a {
         display: flex;
-        justify-content: center;
         gap: 0.5rem;
         padding: 0.5rem;
 

web/projects/marketplace/src/pages/list/categories/categories.component.html

@@ -1,6 +1,5 @@
 <button
   *ngFor="let cat of categories || ['', '', '', '', '', '']"
-  routerLink="../"
   (click)="switchCategory(cat)"
   [class.category_selected]="cat === category"
 >

web/projects/marketplace/src/pages/list/categories/categories.component.scss

@@ -22,6 +22,8 @@ button {
   transition-duration: 300ms;
   margin-bottom: 2rem;
   z-index: 50;
+  background-color: transparent;
+  background-image: none;
 
   &:hover {
     text-decoration-line: none;

web/projects/ui/src/app/apps/portal/routes/system/marketplace/marketplace.component.ts

@@ -12,87 +12,72 @@ import { MarketplaceTileComponent } from './components/tile.component'
 import { MarketplaceControlsComponent } from './components/controls.component'
 import { MarketplacePreviewComponent } from './modals/preview.component'
 import { MarketplaceSidebarsComponent } from './components/sidebars.component'
+import { TuiScrollbarModule } from '@taiga-ui/core'
 
 @Component({
   standalone: true,
   template: `
     <marketplace-menu />
-    <div class="marketplace-content-wrapper">
-      <div class="marketplace-content-inner">
-        <marketplace-notification [url]="(details$ | async)?.url || ''" />
-        <div class="title-wrapper">
-          <h1>
-            {{ category$ | async | titlecase }}
-          </h1>
+    <tui-scrollbar>
+      <div class="marketplace-content-wrapper">
+        <div class="marketplace-content-inner">
+          <marketplace-notification [url]="(details$ | async)?.url || ''" />
+          <div class="title-wrapper">
+            <h1>
+              {{ category$ | async | titlecase }}
+            </h1>
+          </div>
+          @if (filtered$ | async; as filtered) {
+            <section class="marketplace-content-list">
+              @for (pkg of filtered; track $index) {
+                <marketplace-tile
+                  [pkg]="pkg"
+                  [style.--animation-order]="$index"
+                  class="tile-wrapper"
+                />
+              }
+            </section>
+          } @else {
+            <h1 class="loading-text">
+              Loading
+              <span class="loading-dots"></span>
+            </h1>
+          }
         </div>
-        @if (filtered$ | async; as filtered) {
-          <section class="marketplace-content-list">
-            @for (pkg of filtered; track $index) {
-              <marketplace-tile
-                [pkg]="pkg"
-                [style.--animation-order]="$index"
-                class="tile-wrapper"
-              />
-            }
-          </section>
-        } @else {
-          <h1 class="loading-text">
-            Loading
-            <span class="loading-dots"></span>
-          </h1>
-        }
       </div>
-    </div>
+    </tui-scrollbar>
     <marketplace-sidebars />
   `,
+  host: { class: 'g-page' },
   styles: [
     `
       :host {
-        max-height: 100%;
-        overflow: auto;
-        // TODO: Theme
-        background: #18181b url('/assets/img/background_marketplace.png')
-          no-repeat top right;
-      }
-
-      ::ng-deep menu {
-        margin: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
         padding: 0;
-      }
-
-      ::ng-deep button {
-        background-color: transparent;
-        background-image: none;
+        background: rgb(55 58 63 / 90%)
+          url('/assets/img/background_marketplace.png') no-repeat top right;
       }
 
       .marketplace-content {
         &-wrapper {
-          display: flex;
-          justify-content: space-between;
-          overflow: auto;
-          scroll-behavior: smooth;
-          min-height: 100vh;
-
-          @media (min-width: 640px) {
-            padding-left: 34vw;
-          }
           @media (min-width: 768px) {
-            padding-left: 28vw;
-          }
-          @media (min-width: 1024px) {
-            padding-left: 22vw;
+            padding-left: 17rem;
           }
+
           @media (min-width: 1536px) {
-            padding-left: 280px;
+            padding-left: 18rem;
           }
         }
 
         &-inner {
           padding-top: 6rem;
 
-          @media (min-width: 640px) {
-            padding-top: 0.75rem;
-          }
+          // @media (min-width: 640px) {
+          //   padding-top: 0.75rem;
+          // }
+
           @media (min-width: 768px) {
             padding: 0 2rem 2.5rem 2rem;
           }
@@ -125,7 +110,7 @@ import { MarketplaceSidebarsComponent } from './components/sidebars.component'
           @media (min-width: 768px) {
             padding: 2rem;
           }
-          @media (min-width: 1280px) {
+          @media (min-width: 1024px) {
             grid-template-columns: repeat(2, minmax(0, 1fr));
           }
           @media (min-width: 1536px) {
@@ -156,6 +141,7 @@ import { MarketplaceSidebarsComponent } from './components/sidebars.component'
     MarketplaceControlsComponent,
     MarketplacePreviewComponent,
     MarketplaceSidebarsComponent,
+    TuiScrollbarModule,
   ],
 })
 export class MarketplaceComponent {

web/projects/ui/src/styles.scss

@@ -1,5 +1,4 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
-@import '@start9labs/shared/styles/shared.scss';
 
 /** Ionic CSS Variables overrides **/
 :root {