From d33bad75b62827910256c978c7a11523cef70ce4 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Tue, 21 Apr 2020 12:11:42 -0600
Subject: [PATCH] Use flexbox instead of float for layout of collapsible
sections
---
src/components/CollapsibleSection.js | 18 +++++++++---------
src/containers/CollapsibleSection.js | 5 ++++-
2 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
index 3af8a7642..85fbdfade 100644
--- a/src/components/CollapsibleSection.js
+++ b/src/components/CollapsibleSection.js
@@ -35,7 +35,15 @@ export class CollapsibleSection extends Component {
return (
<>
- <div>
+ <div className={classes.container}>
+ <Typography
+ className={classes.heading}
+ id={id}
+ onClick={this.toggleSection}
+ variant="overline"
+ >
+ {label}
+ </Typography>
<MiradorMenuButton
aria-label={
t(
@@ -48,14 +56,6 @@ export class CollapsibleSection extends Component {
>
{open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</MiradorMenuButton>
- <Typography
- className={classes.heading}
- id={id}
- onClick={this.toggleSection}
- variant="overline"
- >
- {label}
- </Typography>
</div>
{open && children}
</>
diff --git a/src/containers/CollapsibleSection.js b/src/containers/CollapsibleSection.js
index ddc9547c1..3daa9258b 100644
--- a/src/containers/CollapsibleSection.js
+++ b/src/containers/CollapsibleSection.js
@@ -5,9 +5,12 @@ import { CollapsibleSection } from '../components/CollapsibleSection';
const styles = {
button: {
- float: 'right',
padding: 0,
},
+ container: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ },
heading: {
cursor: 'pointer',
},
--
GitLab