fix: comments (#3009)

* fix: comments

* undo default

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts

@@ -32,6 +32,15 @@ import { InterfaceGateway } from './interface.service'
       }
     }
   `,
+  styles: `
+    :host {
+      grid-column: span 2;
+
+      &:has(+ section table) header {
+        background: transparent;
+      }
+    }
+  `,
   host: { class: 'g-card' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [

web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts

@@ -12,14 +12,14 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
 @Component({
   selector: 'service-interface',
   template: `
-    <div [style.display]="'grid'">
+    <div>
       <section
         [gateways]="value()?.gateways"
         [isOs]="!!value()?.isOs"
       ></section>
+      <section [publicDomains]="value()?.publicDomains"></section>
       <section [torDomains]="value()?.torDomains"></section>
       <section [privateDomains]="value()?.privateDomains"></section>
-      <section [publicDomains]="value()?.publicDomains"></section>
     </div>
     <hr [style.width.rem]="10" />
     <section [addresses]="value()?.addresses" [isRunning]="true"></section>
@@ -33,7 +33,10 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
       font: var(--tui-font-text-l);
 
       div {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
         gap: inherit;
+        flex-direction: column;
       }
 
       ::ng-deep [tuiSkeleton] {
@@ -43,8 +46,8 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
       }
     }
 
-    :host-context(tui-root._mobile) section {
-      grid-column: span 1;
+    :host-context(tui-root._mobile) div {
+      display: flex;
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

web/projects/ui/src/app/routes/portal/components/interfaces/private-domains.component.ts

@@ -80,7 +80,7 @@ import { InterfaceComponent } from './interface.component'
   `,
   styles: `
     :host {
-      grid-column: span 2;
+      grid-column: span 3;
     }
   `,
   host: { class: 'g-card' },

web/projects/ui/src/app/routes/portal/components/interfaces/public-domains/pd.component.ts

@@ -37,19 +37,15 @@ import { PublicDomain, PublicDomainService } from './pd.service'
         </button>
       }
     </header>
-    <table [appTable]="['Domain', 'Gateway', 'Certificate Authority', null]">
-      @for (domain of publicDomains(); track $index) {
-        <tr [publicDomain]="domain"></tr>
-      } @empty {
-        @if (publicDomains()) {
-          <tr>
-            <td colspan="4">
-              <app-placeholder icon="@tui.globe">
-                {{ 'No public domains' | i18n }}
-              </app-placeholder>
-            </td>
-          </tr>
-        } @else {
+    @if (publicDomains()?.length === 0) {
+      <app-placeholder icon="@tui.globe">
+        {{ 'No public domains' | i18n }}
+      </app-placeholder>
+    } @else {
+      <table [appTable]="['Domain', 'Gateway', 'Certificate Authority', null]">
+        @for (domain of publicDomains(); track $index) {
+          <tr [publicDomain]="domain"></tr>
+        } @empty {
           @for (_ of [0]; track $index) {
             <tr>
               <td colspan="4">
@@ -58,12 +54,12 @@ import { PublicDomain, PublicDomainService } from './pd.service'
             </tr>
           }
         }
-      }
-    </table>
+      </table>
+    }
   `,
   styles: `
     :host {
-      grid-column: span 3;
+      grid-column: span 4;
     }
   `,
   host: { class: 'g-card' },

web/projects/ui/src/app/routes/portal/components/interfaces/tor-domains.component.ts

@@ -82,7 +82,7 @@ type OnionForm = {
   `,
   styles: `
     :host {
-      grid-column: span 2;
+      grid-column: span 3;
     }
   `,
   host: { class: 'g-card' },