From a90a85afae7942bccae2276b35a324e50abfb69b Mon Sep 17 00:00:00 2001
From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com>
Date: Sat, 8 Jun 2024 07:36:23 -0400
Subject: [PATCH] Fix domain page "not found" layout issue (#2474)

---
 .../src/app/domains/domainList.component.html | 48 ++++++++++---------
 .../src/app/domains/domainList.component.scss | 13 +++--
 .../src/app/registrar/registrar.service.ts    |  2 +-
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/console-webapp/src/app/domains/domainList.component.html b/console-webapp/src/app/domains/domainList.component.html
index 9be39b8d4..032dbc04e 100644
--- a/console-webapp/src/app/domains/domainList.component.html
+++ b/console-webapp/src/app/domains/domainList.component.html
@@ -1,28 +1,7 @@
 <app-selected-registrar-wrapper>
-  <div class="console-domains">
+  <div class="console-app-domains">
     <h1 class="mat-headline-4">Domains</h1>
-    <a
-      mat-stroked-button
-      color="primary"
-      href="/console-api/dum-download?registrarId={{
-        registrarService.registrarId()
-      }}"
-      class="console-app-domains__download"
-    >
-      <mat-icon>download</mat-icon>
-      Download domains (.csv)
-    </a>
-    <mat-form-field class="console-app__domains-filter">
-      <mat-label>Filter</mat-label>
-      <input
-        type="search"
-        matInput
-        [(ngModel)]="searchTerm"
-        (ngModelChange)="sendInput()"
-        [disabled]="isLoading"
-        #input
-      />
-    </mat-form-field>
+
     @if (!isLoading && totalResults == 0) {
     <div class="console-app__empty-domains">
       <h1>
@@ -38,6 +17,29 @@
       <div class="console-app__domains-spinner">
         <mat-spinner />
       </div>
+      } @else {
+      <a
+        mat-stroked-button
+        color="primary"
+        href="/console-api/dum-download?registrarId={{
+          registrarService.registrarId()
+        }}"
+        class="console-app-domains__download"
+      >
+        <mat-icon>download</mat-icon>
+        Download domains (.csv)
+      </a>
+      <mat-form-field class="console-app__domains-filter">
+        <mat-label>Filter</mat-label>
+        <input
+          type="search"
+          matInput
+          [(ngModel)]="searchTerm"
+          (ngModelChange)="sendInput()"
+          [disabled]="isLoading"
+          #input
+        />
+      </mat-form-field>
       }
       <mat-table
         [dataSource]="dataSource"
diff --git a/console-webapp/src/app/domains/domainList.component.scss b/console-webapp/src/app/domains/domainList.component.scss
index 86b50ba0e..66c8b3eb4 100644
--- a/console-webapp/src/app/domains/domainList.component.scss
+++ b/console-webapp/src/app/domains/domainList.component.scss
@@ -12,13 +12,10 @@
     }
   }
 
-  &-domains {
-    position: relative;
-    &__download {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
+  &-domains__download {
+    position: absolute;
+    top: -55px;
+    right: 0;
   }
 
   &__domains {
@@ -33,6 +30,8 @@
 
   &__domains-table-parent {
     position: relative;
+    width: fit-content;
+    min-width: 100%;
   }
 
   &__domains-table {
diff --git a/console-webapp/src/app/registrar/registrar.service.ts b/console-webapp/src/app/registrar/registrar.service.ts
index 87b20e99d..a24131cfb 100644
--- a/console-webapp/src/app/registrar/registrar.service.ts
+++ b/console-webapp/src/app/registrar/registrar.service.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Injectable, computed, signal } from '@angular/core';
-import { Observable, tap, switchMap } from 'rxjs';
+import { Observable, switchMap, tap } from 'rxjs';
 
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';