From 32eb853bbb4eea71e284a2498f412e7d441fc092 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 4 Jul 2022 19:00:45 +0000
Subject: [PATCH] Fix clickable area of general event list summary toggle
 (#8979)

* Fix toggle of expanded generic event list summary on bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Margin settings

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/elements/_GenericEventListSummary.scss  | 11 ++++-------
 .../views/elements/GenericEventListSummary.tsx        |  7 ++++++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss
index 2924af12cf..243506a447 100644
--- a/res/css/views/elements/_GenericEventListSummary.scss
+++ b/res/css/views/elements/_GenericEventListSummary.scss
@@ -67,14 +67,16 @@ limitations under the License.
         }
 
         .mx_GenericEventListSummary_toggle {
-            margin: 0 55px 0 5px;
+            margin-block: 0;
+            margin-inline-end: 55px;
 
             &[aria-expanded=false] {
                 order: 9;
+                margin-inline-start: 5px;
             }
 
             &[aria-expanded=true] {
-                text-align: right;
+                margin-inline-start: auto; // reduce clickable area
             }
         }
 
@@ -109,11 +111,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_GenericEventListSummary_toggle {
-    color: $accent;
-    cursor: pointer;
-}
-
 .mx_GenericEventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx
index 5a61cb0400..ddd6bdb9ec 100644
--- a/src/components/views/elements/GenericEventListSummary.tsx
+++ b/src/components/views/elements/GenericEventListSummary.tsx
@@ -119,7 +119,12 @@ const GenericEventListSummary: React.FC<IProps> = ({
             data-layout={layout}
             data-testid={testId}
         >
-            <AccessibleButton className="mx_GenericEventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
+            <AccessibleButton
+                kind="link_inline"
+                className="mx_GenericEventListSummary_toggle"
+                onClick={toggleExpanded}
+                aria-expanded={expanded}
+            >
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
             { body }