diff --git a/CHANGELOG.md b/CHANGELOG.md index c5eb83ea16..52e5fb3fb0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## unreleased +### Fixed +- Align actionbar item horizontal and enforce correct margin between them ([#1358](https://github.com/scm-manager/scm-manager/pull/1358)) + ## [2.6.1] - 2020-09-30 ### Fixed - Not found error when using browse command in empty hg repository ([#1355](https://github.com/scm-manager/scm-manager/pull/1355)) diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx index 75142a2af8..612714fcdf 100644 --- a/scm-ui/ui-components/src/Breadcrumb.tsx +++ b/scm-ui/ui-components/src/Breadcrumb.tsx @@ -48,9 +48,22 @@ const HomeIcon = styled(Icon)` line-height: 1.5rem; `; -const ActionWrapper = styled.div` +const ActionBar = styled.div` align-self: center; - padding-right: 1rem; + + /* order actionbar items horizontal */ + display: flex; + justify-content: flex-start; + + /* ensure space between action bar items */ + & > * { + /* + * We have to use important, because plugins could use field or control classes like the editor-plugin does. + * Those classes overwrite the margin which is ok, if the plugin is the only one which is using the actionbar. + * But it looks terrible if another plugin use the actionbar, which does not use field and control classes. + */ + margin: 0 0.75rem 0 0 !important; + } `; class Breadcrumb extends React.Component { @@ -102,7 +115,7 @@ class Breadcrumb extends React.Component { {binder.hasExtension("repos.sources.actionbar") && ( - + { }} renderAll={true} /> - + )}