From ca0dbe205231453bf8461358476fa555eb3efa79 Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Wed, 26 Oct 2022 15:44:59 +0200
Subject: [PATCH] Improve layout address list peer detail

---
 .../consul/peer/address/list/index.hbs        | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs
index c603c22f76..727b0e7e7d 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs
@@ -1,15 +1,25 @@
-<ListCollection
-  class="consul-peer-address-list"
-  ...attributes
-  @items={{@items}}
-as |item|>
-    <BlockSlot @name="header">
-      <p>
-        {{item}}
-        <CopyButton
-          @value={{item}}
-          @name="Address"
-        />
-      </p>
-    </BlockSlot>
-</ListCollection>
+<Providers::Dimension as |p|>
+  {{#if p.data.height}}
+    <div style={{p.data.fillRemainingHeightStyle}} class="overflow-y-scroll">
+      <VerticalCollection
+        @tagName="ul"
+        @estimateHeight={{p.data.height}}
+        @items={{@items}}
+        as |address index|
+      >
+        <li
+          class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0 flex items-center justify-between group"
+        >
+          <div
+            class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold"
+          >{{address}}</div>
+          <CopyButton
+            @value={{address}}
+            @name="Address"
+            class="opacity-0 group-hover:opacity-100"
+          />
+        </li>
+      </VerticalCollection>
+    </div>
+  {{/if}}
+</Providers::Dimension>
\ No newline at end of file