fix: modal small, alignment issues

Signed-off-by: Dafnik <[email protected]>

.eslintrc.json

@@ -2,7 +2,7 @@
   "root": true,
   "reportUnusedDisableDirectives": true,
   "extends": ["prettier"],
-  "ignorePatterns": ["environment.*.ts", "postbuild.js"],
+  "ignorePatterns": ["environment.*.ts"],
   "overrides": [
     {
       "files": ["*.js"],

package.json

@@ -5,10 +5,9 @@
     "ng": "ng",
     "start": "ng serve --hmr",
     "start:lava": "ng serve --configuration lava --hmr",
-    "postbuild": "node tools/postbuild.js",
-    "build:prod": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration production && cp ./LICENSE ./dist/WaiterRobot-Web/ && pnpm postbuild",
-    "build:lava": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration lava && cp ./LICENSE ./dist/WaiterRobot-Web/ && npm run postbuild",
-    "build:local": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration local && cp ./LICENSE ./dist/WaiterRobot-Web/ && npm run postbuild",
+    "build:prod": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration production && cp ./LICENSE ./dist/WaiterRobot-Web/",
+    "build:lava": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration lava && cp ./LICENSE ./dist/WaiterRobot-Web/",
+    "build:local": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration local && cp ./LICENSE ./dist/WaiterRobot-Web/",
     "build:stats": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --stats-json",
     "analyze": "npm run build:stats && source-map-explorer dist/WaiterRobot-Web/**/*.js",
     "tsc:check": "tsc",
@@ -34,10 +33,10 @@
     "@angular/platform-browser": "17.3.11",
     "@angular/platform-browser-dynamic": "17.3.11",
     "@angular/router": "17.3.11",
+    "@jsverse/transloco": "7.4.2",
     "@micro-sentry/angular": "^7.0.2",
     "@ng-bootstrap/ng-bootstrap": "16.0.0",
     "@ng-select/ng-select": "^12.0.4",
-    "@jsverse/transloco": "7.4.2",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-charts": "20.5.0",
     "bootstrap": "5.3.2",
@@ -86,7 +85,6 @@
     "karma-jasmine-html-reporter": "2.1.0",
     "license-report": "^6.4.0",
     "prettier": "3.3.1",
-    "purgecss": "6.0.0",
     "source-map-explorer": "2.5.3",
     "swagger-typescript-api": "^13.0.0",
     "typescript": "5.4.5"

src/app/home/_layout/_components/mobile-nav.component.ts

@@ -20,6 +20,7 @@ import {NavComponent} from './nav.component';
     /* Opening offcanvas as a component requires this style in order to scroll */
     :host {
       height: 100vh;
+      min-height: 100%;
       display: flex;
       flex-direction: column;
     }

src/app/home/_layout/_components/nav.component.ts

@@ -326,6 +326,6 @@ export class NavComponent {
   selectedEventIdRoute = computed(() => this.#selectedEventService.selectedId() ?? 'eventId');
 
   openSwitcher(): void {
-    this.modal.open(SwitcherModalComponent, {ariaLabelledBy: 'modal-switcher-title', size: 'xl'});
+    this.modal.open(SwitcherModalComponent, {ariaLabelledBy: 'modal-switcher-title', size: 'lg'});
   }
 }

src/app/home/_layout/_components/switcher.component.ts

@@ -24,7 +24,7 @@ import {SelectedOrganisationService} from '../../organisations/_services/selecte
 
       <div class="d-flex gap-4 flex-column flex-lg-row">
         @if (allOrganisations(); as organisations) {
-          <div class="w-100" style="min-width: 400px">
+          <div class="w-100">
             <h2>Organisation</h2>
             <div class="list-group list-group-checkable d-grid gap-2 border-0 w-100 mt-2">
               @for (organisation of organisations; track organisation.id) {
@@ -50,7 +50,7 @@ import {SelectedOrganisationService} from '../../organisations/_services/selecte
         } @else {
           <app-progress-bar />
         }
-        <div class="w-100" style="min-width: 400px">
+        <div class="w-100">
           <h2>Event / Location</h2>
           @if (form.controls.organisationId.value) {
             @if (allEvents(); as events) {

src/app/home/_layout/home.layout.ts

@@ -35,7 +35,7 @@ import {NetworkOfflineWarningComponent} from './_components/network-offline-warn
 
           <app-active-system-notifications class="d-block d-xl-none" disableIgnore />
 
-          <main class="px-1 px-md-2 pb-4 col-12" [class.container-xxxl]="!isFullScreen()" [class.px-md-2]="isFullScreen()">
+          <main class="px-md-2 col-12 px-1 pb-4" [class.container-xxxl]="!isFullScreen()">
             <app-network-offline-warning />
 
             <app-maintenance-warning />
@@ -53,9 +53,9 @@ import {NetworkOfflineWarningComponent} from './_components/network-offline-warn
     </div>
   `,
   styles: `
-    @media screen and (min-width: 1201px) {
+    @media screen and (min-width: 1200px) {
       .main-container {
-        margin-left: 300px;
+        padding-left: 300px;
         display: flex;
         flex-direction: column;
         align-items: center;

src/main.ts

@@ -7,10 +7,10 @@ import {bootstrapApplication} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideRouter, TitleStrategy, withPreloading} from '@angular/router';
 import {NgbDateTimeAdapter} from '@home-shared/components/datetime-picker/datetime-adapter';
+import {provideTransloco} from '@jsverse/transloco';
 import {MicroSentryModule} from '@micro-sentry/angular';
 
 import {NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';
-import {provideTransloco} from '@jsverse/transloco';
 
 import {CustomTitleStrategy} from '@shared/custom-title.strategy';
 import {EnvironmentHelper} from '@shared/EnvironmentHelper';
@@ -40,7 +40,7 @@ import {TranslocoHttpLoader} from './transloco-loader';
 bootstrapApplication(AppComponent, {
   providers: [
     provideDfxHelper(
-      withMobileBreakpoint(992),
+      withMobileBreakpoint(1200),
       withBaseUrlInterceptor(EnvironmentHelper.getAPIUrl(), ['assets/i18n', 'assets/licenses.json', 'share.dafnik.me']),
       withLoggingInterceptor([
         'json',

src/styles.scss

@@ -38,10 +38,22 @@ td:has(> div.form-check) {
 }
 
 /* Horizontal scroll for tabs */
+.nav-x-scroll {
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+}
+
 .nav-x-scroll .nav-tabs {
   overflow-x: auto;
   overflow-y: hidden;
   flex-wrap: nowrap;
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.nav-x-scroll .nav-tabs::-webkit-scrollbar {
+  display: none;
 }
 .nav-x-scroll .nav-tabs .nav-link {
   white-space: nowrap;
@@ -97,19 +109,6 @@ a:hover.badge {
   animation: btnSpinner 0.8s linear infinite !important;
 }
 
-.navbar > .my-container {
-  display: flex;
-  flex-wrap: inherit;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.my-container {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
 @media (min-width: 1800px) {
   .container-xxxl,
   .container-xxl,