better peer connect button

webui/src/PeerAvailableCard.scss

@@ -3,8 +3,7 @@
 .peerAvailableCard {
   @extend .peerCard;
 
-  display: flex;
-  flex-direction: row;
+  @include card-with-actions;
 
   .peerInfo {
     flex-grow: 1;

webui/src/PeerAvailableCard.tsx

@@ -16,10 +16,14 @@ export function PeerAvailableCard({ peerInfo }: TPeerAvailableCardProps) {
                 <span>UUID: </span>
                 <span>{peerInfo.uuid}</span>
             </div>
-            <fetcher.Form method="put" action={"/home/peers"}>
+            <fetcher.Form
+                className="actions"
+                method="put"
+                action={"/home/peers"}
+            >
+                <button type="submit">connect</button>
                 <input name="intent" hidden={true} value={"add_peer"} />
                 <input name="uuid" hidden={true} value={peerInfo.uuid} />
-                <button type="submit">connect</button>
             </fetcher.Form>
         </div>
     );

webui/src/PeerCardCommon.scss

@@ -3,5 +3,7 @@
 .peerCard {
   @include border-shadow;
 
-  padding: 0.25rem;
+  > * {
+    padding: 0.5rem;
+  }
 }

webui/src/common.scss

@@ -6,4 +6,43 @@
 
 @mixin home-view {
   padding: 1rem;
+}
+
+@mixin card-with-actions {
+
+  display: flex;
+  flex-direction: row;
+
+  .actions {
+    display: flex;
+    align-self: stretch;
+
+    border-left: 1px solid #e4e4e4;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+
+    padding: 0;
+
+    > * {
+      margin-left: 0.5rem;
+    }
+
+    > *:first-child {
+      margin-left: 0;
+    }
+
+    button {
+      background: none;
+      border: none;
+      text-decoration: none;
+      cursor: pointer;
+      font-family: inherit;
+      color: inherit;
+      font-size: inherit;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
+
 }