diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js index 3af8a76428f0a44247ae76588ec761535923c4f7..85fbdfade7285729a36e1622be24535f12df0450 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 ddc9547c10b8e8d06e7f3329a6cc37f2f12da669..3daa9258b1ae29be903287fca527ea8ba41a459d 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', },