From d47eecbd24fd51af43e2c17f34ac9d6bbab7b562 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 6 May 2021 13:05:58 +0100
Subject: [PATCH] Make button sizes more consistent and fix untrapped behaviour
 of join button leaking to parent

---
 res/css/structures/_SpaceRoomDirectory.scss      | 15 +++++++++++++--
 src/components/structures/SpaceRoomDirectory.tsx | 14 +++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
index 86bcd6a320..7925686bf1 100644
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -86,7 +86,7 @@ limitations under the License.
         color: $primary-fg-color;
 
         .mx_AccessibleButton {
-            padding: 4px 8px;
+            padding: 4px 12px;
             font-weight: normal;
 
             & + .mx_AccessibleButton {
@@ -94,6 +94,11 @@ limitations under the License.
             }
         }
 
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; // to account for the 1px border
+        }
+
         > span {
             margin-left: auto;
         }
@@ -246,11 +251,17 @@ limitations under the License.
             grid-row: 1/3;
 
             .mx_AccessibleButton {
-                padding: 8px 18px;
+                line-height: $font-24px;
+                padding: 4px 16px;
                 display: inline-block;
                 visibility: hidden;
             }
 
+            .mx_AccessibleButton_kind_danger_outline,
+            .mx_AccessibleButton_kind_primary_outline {
+                padding: 3px 16px; // to account for the 1px border
+            }
+
             .mx_Checkbox {
                 display: inline-flex;
                 vertical-align: middle;
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 35f9f61695..79a1fbc10e 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -24,7 +24,7 @@ import {sortBy} from "lodash";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
 import {_t} from "../../languageHandler";
-import AccessibleButton from "../views/elements/AccessibleButton";
+import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
@@ -108,8 +108,16 @@ const Tile: React.FC<ITileProps> = ({
     const cliRoom = cli.getRoom(room.room_id);
     const myMembership = cliRoom?.getMyMembership();
 
-    const onPreviewClick = () => onViewRoomClick(false);
-    const onJoinClick = () => onViewRoomClick(true);
+    const onPreviewClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(false);
+    }
+    const onJoinClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(true);
+    }
 
     let button;
     if (myMembership === "join") {