NVE · amish1188 · May 13, 2025 · Apr 3, 2025 · Apr 3, 2025 · May 7, 2025
diff --git a/src/app/components/observation/observation/observation.component.css b/src/app/components/observation/observation/observation.component.css
@@ -1,7 +1,7 @@
 :host {
   display: block;
-  margin-left: 0;
-  margin-right: 0;
+  max-width: var(--desktop-max-width);
+  margin: 0 auto;
   margin-top: 16px;
   background-color: white;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

diff --git a/src/app/modules/login/pages/user-information/user-information.page.scss b/src/app/modules/login/pages/user-information/user-information.page.scss
@@ -10,6 +10,7 @@
   background: var(--background-color-menu);
   border-radius: var(--border-radius-large);
   --ion-grid-padding: 32px;
+  max-width: var(--desktop-max-width);
 }
 
 .profile-icon {

diff --git a/...ation/components/registration-content-wrapper/registration-content-wrapper.component.scss b/...ation/components/registration-content-wrapper/registration-content-wrapper.component.scss
@@ -1,4 +1,9 @@
 ion-col {
-  max-width: 600px;
+  max-width: var(--desktop-max-width);
+  margin: 0 auto;
+}
+
+ion-grid {
+  max-width: var(--form-max-width);
   margin: 0 auto;
 }
diff --git a/src/app/modules/registration/pages/overview/overview.page.scss b/src/app/modules/registration/pages/overview/overview.page.scss
@@ -7,7 +7,7 @@ ion-list {
 }
 
 .content-wrapper {
-  max-width: 960px;
+  max-width: var(--form-max-width);
   margin: auto;
 
   ion-item {

diff --git a/src/app/modules/shared/components/images-grid/images-grid.ts/images-grid.component.scss b/src/app/modules/shared/components/images-grid/images-grid.ts/images-grid.component.scss
@@ -1,5 +1,5 @@
 :host {
-  max-width: 960px;
+  max-width: var(--desktop-max-width);
   margin: auto;
   display: flex;
   flex-wrap: wrap;

diff --git a/src/app/pages/my-observations/components/draft-list/draft-list.component.scss b/src/app/pages/my-observations/components/draft-list/draft-list.component.scss
@@ -1,3 +1,7 @@
 ion-item-divider {
   margin-bottom: 10px;
 }
+
+ion-list {
+  width: 100%;
+}
diff --git a/src/app/pages/my-observations/components/sent-list/sent-list.component.html b/src/app/pages/my-observations/components/sent-list/sent-list.component.html
@@ -1,4 +1,3 @@
-<!-- A list of observations sent to server -->
 <ng-container *ngIf="myRegistrations; else skeleton">
   <ion-item-divider no-border>
     <ion-grid class="ion-no-padding ion-no-margin">

diff --git a/src/app/pages/my-observations/my-observations.page.html b/src/app/pages/my-observations/my-observations.page.html
@@ -8,21 +8,23 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <app-refresh-with-cancel [refreshFunc]="refreshFunc"></app-refresh-with-cancel>
-  <app-draft-list (isEmpty)="refreshDraftEmptyState($event)"></app-draft-list>
-  <app-sent-list (isEmpty)="refreshSentEmptyState($event)"></app-sent-list>
-  <ion-grid *ngIf="draftIsEmpty && sentRegistrationsIsEmpty" class="full-grid">
-    <ion-row class="full-grid-row">
-      <ion-col class="ion-text-center ion-align-self-center">
-        <svg-icon src="/assets/images/empty-states/no-my-observations.svg"></svg-icon>
-      </ion-col>
-    </ion-row>
-    <ion-row class="full-grid-row">
-      <ion-col class="ion-text-center ion-margin-horizontal">
-        <h2>{{ "MY_OBSERVATIONS.NO_OBSERVATIONS" | translate }}</h2>
-        <h3 class="ion-text-wrap">{{ "MY_OBSERVATIONS.NO_OBSERVATIONS_TEXT" | translate }}</h3>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <main>
+    <app-refresh-with-cancel [refreshFunc]="refreshFunc"></app-refresh-with-cancel>
+    <app-draft-list (isEmpty)="refreshDraftEmptyState($event)"></app-draft-list>
+    <app-sent-list (isEmpty)="refreshSentEmptyState($event)"></app-sent-list>
+    <ion-grid *ngIf="draftIsEmpty && sentRegistrationsIsEmpty" class="full-grid">
+      <ion-row class="full-grid-row">
+        <ion-col class="ion-text-center ion-align-self-center">
+          <svg-icon src="/assets/images/empty-states/no-my-observations.svg"></svg-icon>
+        </ion-col>
+      </ion-row>
+      <ion-row class="full-grid-row">
+        <ion-col class="ion-text-center ion-margin-horizontal">
+          <h2>{{ "MY_OBSERVATIONS.NO_OBSERVATIONS" | translate }}</h2>
+          <h3 class="ion-text-wrap">{{ "MY_OBSERVATIONS.NO_OBSERVATIONS_TEXT" | translate }}</h3>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </main>
 </ion-content>
 <app-add-menu></app-add-menu>
diff --git a/src/app/pages/my-observations/my-observations.page.scss b/src/app/pages/my-observations/my-observations.page.scss
@@ -7,3 +7,8 @@ ion-spinner {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+main {
+  max-width: var(--desktop-max-width);
+  margin: 0 auto;
+}
diff --git a/src/app/pages/observation-list/empty-state/empty-state.component.scss b/src/app/pages/observation-list/empty-state/empty-state.component.scss
@@ -8,7 +8,7 @@
 }
 
 ion-row {
-  max-width: 960px;
+  max-width: var(--desktop-max-width);
   margin: 10px auto;
   gap: 10px;
 }

diff --git a/src/app/pages/observation-list/error-state/error-state.component.css b/src/app/pages/observation-list/error-state/error-state.component.css
@@ -8,7 +8,7 @@
 }
 
 ion-row {
-  max-width: 960px;
+  max-width: var(--desktop-max-width);
   margin: 10px auto;
   gap: 10px;
 }

diff --git a/src/app/pages/observation-list/image-list/image-list.component.css b/src/app/pages/observation-list/image-list/image-list.component.css
@@ -1,7 +1,6 @@
 :host {
   display: block;
   height: 100%;
-  --max-width: var(--list-search-max-width, 960px);
 }
 
 ion-content {
@@ -14,7 +13,7 @@ ion-content::part(scroll) {
 }
 
 .list-header {
-  max-width: var(--max-width);
+  max-width: var(--desktop-max-width);
   margin: 0 auto;
 }
 

diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.css b/src/app/pages/observation-list/observation-list/observation-list.component.css
@@ -2,19 +2,17 @@
   display: block;
   height: 100%;
   width: 100%;
-
-  --max-width: var(--list-search-max-width, 960px);
 }
 
 .list-header {
-  max-width: var(--max-width);
+  max-width: var(--desktop-max-width);
   margin: 0 auto;
 }
 
 .list {
   height: 100%;
   width: 100%;
-  max-width: var(--max-width);
+  max-width: var(--desktop-max-width);
   margin: 0 auto;
 }
 

diff --git a/src/app/pages/user-settings/user-settings.page.html b/src/app/pages/user-settings/user-settings.page.html
@@ -7,57 +7,59 @@
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding" *ngIf="userSettings">
-  <ion-list lines="full">
-    <!-- App version -->
-    <ion-item *ngIf="version" (click)="versionClick()">
-      <ion-label position="stacked" color="medium" class="ion-text-uppercase"
-        >{{ "SETTINGS.APP_VERSION" | translate }}
-      </ion-label>
-      <ion-text class="ion-align-self-start build-version">
-        {{ version.version }} ({{ version.buildNumber }})
-      </ion-text>
-      <ion-text class="build-rev ion-align-self-start" color="medium">
-        {{ version.revision }} - {{ version.date | formatDate | async }}
-      </ion-text>
-    </ion-item>
+  <main>
+    <ion-list lines="full">
+      <!-- App version -->
+      <ion-item *ngIf="version" (click)="versionClick()">
+        <ion-label position="stacked" color="medium" class="ion-text-uppercase"
+          >{{ "SETTINGS.APP_VERSION" | translate }}
+        </ion-label>
+        <ion-text class="ion-align-self-start build-version">
+          {{ version.version }} ({{ version.buildNumber }})
+        </ion-text>
+        <ion-text class="build-rev ion-align-self-start" color="medium">
+          {{ version.revision }} - {{ version.date | formatDate | async }}
+        </ion-text>
+      </ion-item>
 
-    <!-- App mode -->
-    <app-select
-      [(selectedValue)]="userSettings.appMode"
-      [options]="appModeOptions"
-      (selectedValueChange)="updateSettings()"
-      [showReset]="false"
-      label="SETTINGS.APPMODE"
-    ></app-select>
+      <!-- App mode -->
+      <app-select
+        [(selectedValue)]="userSettings.appMode"
+        [options]="appModeOptions"
+        (selectedValueChange)="updateSettings()"
+        [showReset]="false"
+        label="SETTINGS.APPMODE"
+      ></app-select>
 
-    <!-- Use high detail maps -->
-    <ion-item>
-      <ion-label> {{ "SETTINGS.USE_RETINA_MAP" | translate }} </ion-label>
-      <ion-toggle slot="end" [(ngModel)]="userSettings.useRetinaMap" (ngModelChange)="updateSettings()"> </ion-toggle>
-    </ion-item>
+      <!-- Use high detail maps -->
+      <ion-item>
+        <ion-label> {{ "SETTINGS.USE_RETINA_MAP" | translate }} </ion-label>
+        <ion-toggle slot="end" [(ngModel)]="userSettings.useRetinaMap" (ngModelChange)="updateSettings()"> </ion-toggle>
+      </ion-item>
 
-    <!-- GPS Debug -->
-    <ion-item *ngIf="userSettings.featureToggleDeveloperMode">
-      <ion-label> GPS debug </ion-label>
-      <ion-toggle slot="end" [(ngModel)]="userSettings.featureToggeGpsDebug" (ngModelChange)="updateSettings()">
-      </ion-toggle>
-    </ion-item>
-  </ion-list>
+      <!-- GPS Debug -->
+      <ion-item *ngIf="userSettings.featureToggleDeveloperMode">
+        <ion-label> GPS debug </ion-label>
+        <ion-toggle slot="end" [(ngModel)]="userSettings.featureToggeGpsDebug" (ngModelChange)="updateSettings()">
+        </ion-toggle>
+      </ion-item>
+    </ion-list>
 
-  <ion-list lines="none">
-    <ion-button expand="block" [disabled]="isUpdating" (click)="updateDropdowns()">
-      <ion-icon slot="start" name="refresh"></ion-icon>
-      {{ "SETTINGS.UPDATE_DROPDOWNS" | translate }}
-    </ion-button>
-    @if (isNativePlatform) {
-      <ion-button expand="block" [disabled]="isUpdating" (click)="sendLogs()">
-        <ion-icon slot="start" name="mail-outline"></ion-icon>
-        {{ "SETTINGS.SEND_LOGS" | translate }}
+    <ion-list lines="none">
+      <ion-button expand="block" [disabled]="isUpdating" (click)="updateDropdowns()">
+        <ion-icon slot="start" name="refresh"></ion-icon>
+        {{ "SETTINGS.UPDATE_DROPDOWNS" | translate }}
       </ion-button>
-    }
-    <ion-button class="reset-button" color="danger" expand="block" [disabled]="isUpdating" (click)="confirmReset()">
-      <ion-icon slot="start" name="medkit"></ion-icon>
-      {{ "SETTINGS.RESET" | translate }}
-    </ion-button>
-  </ion-list>
+      @if (isNativePlatform) {
+        <ion-button expand="block" [disabled]="isUpdating" (click)="sendLogs()">
+          <ion-icon slot="start" name="mail-outline"></ion-icon>
+          {{ "SETTINGS.SEND_LOGS" | translate }}
+        </ion-button>
+      }
+      <ion-button class="reset-button" color="danger" expand="block" [disabled]="isUpdating" (click)="confirmReset()">
+        <ion-icon slot="start" name="medkit"></ion-icon>
+        {{ "SETTINGS.RESET" | translate }}
+      </ion-button>
+    </ion-list>
+  </main>
 </ion-content>
diff --git a/src/app/pages/user-settings/user-settings.page.scss b/src/app/pages/user-settings/user-settings.page.scss
@@ -23,3 +23,8 @@ ion-item {
     }
   }
 }
+
+main {
+  max-width: var(--desktop-max-width);
+  margin: 0 auto;
+}
diff --git a/src/global.scss b/src/global.scss
@@ -93,6 +93,11 @@
   --ion-color-danger-contrast-rgb: 255, 255, 255;
   --ion-color-danger-shade: #b40000;
   --ion-color-danger-tint: #d11a1a;
+
+  /*Setter maks bredde på innhold på store skjermer. Foreløpig bør den brukes på hver side, men
+   vi kan vurdere å ha en felles kilde for layoutens maksimale bredde som settes et sted. */
+  --desktop-max-width: 960px;
+  --form-max-width: 650px;
 }
 
 html {
@@ -954,6 +959,7 @@ ion-select-popover ion-list ion-item ion-radio {
 // These styles needs to be applied globally according to ionic docs: https://ionicframework.com/docs/api/popover#styling
 ion-popover.select-popover {
   --width: fit-content(90vw);
+  --min-width: 150px;
   --max-width: 90vw;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,3 +23,8 @@ ion-item { @@
         }
       }
     }
+    main {
+      max-width: var(--desktop-max-width);
+      margin: 0 auto;
+    }