diff --git a/gradle/changelog/simplify_styling.yaml b/gradle/changelog/simplify_styling.yaml
new file mode 100644
index 0000000000..e1f638db37
--- /dev/null
+++ b/gradle/changelog/simplify_styling.yaml
@@ -0,0 +1,2 @@
+- type: Changed
+  description: Replace styled-components with bulma helpers ([#1783](https://github.com/scm-manager/scm-manager/pull/1783))
diff --git a/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx
index 13f506029d..360f314dda 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx
@@ -27,18 +27,14 @@ import { Repository, Link } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
 import CloneInformation from "./CloneInformation";
 
-const Wrapper = styled.div`
-  position: relative;
-`;
-
 const Switcher = styled(ButtonAddons)`
   position: absolute;
   top: 0;
   right: 0;
 `;
 
-const SmallButton = styled(Button).attrs(props => ({
-  className: "is-small"
+const SmallButton = styled(Button).attrs((props) => ({
+  className: "is-small",
 }))`
   height: inherit;
 `;
@@ -70,13 +66,13 @@ export default class ProtocolInformation extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      selected: selectHttpOrFirst(props.repository)
+      selected: selectHttpOrFirst(props.repository),
     };
   }
 
   selectProtocol = (protocol: Link) => {
     this.setState({
-      selected: protocol
+      selected: protocol,
     });
   };
 
@@ -116,10 +112,10 @@ export default class ProtocolInformation extends React.Component<Props, State> {
     }
 
     return (
-      <Wrapper>
+      <div className="is-relative">
         <Switcher>{protocols.map(this.renderProtocolButton)}</Switcher>
         {cloneInformation}
-      </Wrapper>
+      </div>
     );
   }
 }
diff --git a/scm-ui/ui-components/src/BranchSelector.tsx b/scm-ui/ui-components/src/BranchSelector.tsx
index 062221ce57..c530eb7344 100644
--- a/scm-ui/ui-components/src/BranchSelector.tsx
+++ b/scm-ui/ui-components/src/BranchSelector.tsx
@@ -44,10 +44,6 @@ const MinWidthControl = styled.div`
   min-width: 10rem;
 `;
 
-const NoBottomMarginField = styled.div`
-  margin-bottom: 0 !important;
-`;
-
 const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, label, disabled }) => {
   if (branches) {
     return (
@@ -56,7 +52,7 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
           <label className={classNames("label", "is-size-6")}>{label}</label>
         </ZeroflexFieldLabel>
         <div className="field-body">
-          <NoBottomMarginField className={classNames("field", "is-narrow")}>
+          <div className={classNames("field", "is-narrow", "mb-0")}>
             <MinWidthControl className="control">
               <Select
                 className="is-fullwidth"
@@ -67,7 +63,7 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
                 addValueToOptions={true}
               />
             </MinWidthControl>
-          </NoBottomMarginField>
+          </div>
         </div>
       </div>
     );
diff --git a/scm-ui/ui-components/src/Breadcrumb.stories.tsx b/scm-ui/ui-components/src/Breadcrumb.stories.tsx
index dfa5a32cca..2cb32e1c87 100644
--- a/scm-ui/ui-components/src/Breadcrumb.stories.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.stories.tsx
@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
 import styled from "styled-components";
@@ -30,6 +29,7 @@ import repository from "./__resources__/repository";
 // @ts-ignore ignore unknown png
 import Git from "./__resources__/git-logo.png";
 import { MemoryRouter } from "react-router-dom";
+import Icon from "./Icon";
 
 const Wrapper = styled.div`
   margin: 2rem;
@@ -42,10 +42,15 @@ const longPath =
   "dream-path/src/main/scm-plugins/javaUtilityHomeHousingLinkReferrer/sonia/scm/repositoryUndergroundSupportManager/spi/SvnRepositoryServiceResolver.java";
 const baseUrl = "scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources";
 const sources = Git;
+const prefix = (
+  <a href="#link">
+    <Icon name="heart" color="danger" />
+  </a>
+);
 
 storiesOf("BreadCrumb", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <Breadcrumb
       repository={repository}
@@ -69,4 +74,17 @@ storiesOf("BreadCrumb", module)
       revision={"1"}
       permalink={"/" + longPath}
     />
+  ))
+  .add("With prefix button", () => (
+    <Breadcrumb
+      repository={repository}
+      defaultBranch={master}
+      branch={master}
+      path={path}
+      baseUrl={baseUrl}
+      sources={sources}
+      revision={"1"}
+      permalink={"/" + path}
+      preButtons={prefix}
+    />
   ));
diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx
index dede02a2e5..76970bc6de 100644
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -93,14 +93,7 @@ const HomeIcon = styled(Icon)`
 `;
 
 const ActionBar = styled.div`
-  align-self: center;
-
-  /* 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.
@@ -113,7 +106,6 @@ const ActionBar = styled.div`
 
 const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
-  margin-right: 0.5rem;
 `;
 
 const Breadcrumb: FC<Props> = ({
@@ -176,7 +168,7 @@ const Breadcrumb: FC<Props> = ({
   const renderBreadcrumbNav = () => {
     let prefixButtons = null;
     if (preButtons) {
-      prefixButtons = <PrefixButton>{preButtons}</PrefixButton>;
+      prefixButtons = <PrefixButton className="mr-2">{preButtons}</PrefixButton>;
     }
 
     let homeUrl = baseUrl + "/";
@@ -227,13 +219,7 @@ const Breadcrumb: FC<Props> = ({
       binder.hasExtension<extensionPoints.ReposSourcesEmptyActionbar>("repos.sources.empty.actionbar") &&
       sources?._embedded?.children?.length === 0
     ) {
-      return (
-        <ExtensionPoint
-          name="repos.sources.empty.actionbar"
-          props={{ repository, sources }}
-          renderAll={true}
-        />
-      );
+      return <ExtensionPoint name="repos.sources.empty.actionbar" props={{ repository, sources }} renderAll={true} />;
     }
     if (binder.hasExtension<extensionPoints.ReposSourcesActionbar>("repos.sources.actionbar")) {
       return <ExtensionPoint name="repos.sources.actionbar" props={extProps} renderAll={true} />;
@@ -243,11 +229,15 @@ const Breadcrumb: FC<Props> = ({
 
   return (
     <>
-      <div className="is-flex is-align-items-center is-justify-content-flex-end">
+      <div className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
         {renderBreadcrumbNav()}
-        {<ActionBar className="my-2">{renderExtensionPoints()}</ActionBar>}
+        {
+          <ActionBar className={classNames("is-flex", "is-justify-content-flex-start", "is-align-self-center", "my-2")}>
+            {renderExtensionPoints()}
+          </ActionBar>
+        }
       </div>
-      <hr className="is-marginless" />
+      <hr className="m-0" />
     </>
   );
 };
diff --git a/scm-ui/ui-components/src/CardColumn.tsx b/scm-ui/ui-components/src/CardColumn.tsx
index c72deec191..f501a751ca 100644
--- a/scm-ui/ui-components/src/CardColumn.tsx
+++ b/scm-ui/ui-components/src/CardColumn.tsx
@@ -44,29 +44,6 @@ const NoEventWrapper = styled.article`
   z-index: 1;
 `;
 
-const AvatarWrapper = styled.figure`
-  margin-top: 0.8em;
-  margin-left: 1em !important;
-`;
-
-const FlexFullHeight = styled.div`
-  flex-direction: column;
-  justify-content: space-around;
-  align-self: stretch;
-`;
-
-const FooterWrapper = styled.div`
-  padding-bottom: 1rem;
-`;
-
-const ContentRight = styled.div`
-  margin-left: auto;
-`;
-
-const RightMarginDiv = styled.div`
-  margin-right: 0.5rem;
-`;
-
 const InheritFlexShrinkDiv = styled.div`
   flex-shrink: inherit;
   pointer-events: all;
@@ -81,11 +58,11 @@ const CardColumn: FC<Props> = ({
   footerLeft,
   footerRight,
   action,
-  className
+  className,
 }) => {
-  const renderAvatar = avatar ? <AvatarWrapper className="media-left">{avatar}</AvatarWrapper> : null;
+  const renderAvatar = avatar ? <figure className="media-left mt-3 ml-4">{avatar}</figure> : null;
   const renderDescription = description ? <p className="shorten-text">{description}</p> : null;
-  const renderContentRight = contentRight ? <ContentRight>{contentRight}</ContentRight> : null;
+  const renderContentRight = contentRight ? <div className="ml-auto">{contentRight}</div> : null;
 
   let createLink = null;
   if (link) {
@@ -94,7 +71,7 @@ const CardColumn: FC<Props> = ({
     createLink = (
       <a
         className="overlay-column"
-        onClick={e => {
+        onClick={(e) => {
           e.preventDefault();
           action();
         }}
@@ -108,7 +85,16 @@ const CardColumn: FC<Props> = ({
       {createLink}
       <NoEventWrapper className={classNames("media", className)}>
         {renderAvatar}
-        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
+        <div
+          className={classNames(
+            "media-content",
+            "text-box",
+            "is-flex",
+            "is-flex-direction-column",
+            "is-justify-content-space-around",
+            "is-align-self-stretch"
+          )}
+        >
           <div className="is-flex">
             <div className="is-clipped mb-0">
               <p className="shorten-text m-0">{title}</p>
@@ -116,13 +102,13 @@ const CardColumn: FC<Props> = ({
             </div>
             {renderContentRight}
           </div>
-          <FooterWrapper className={classNames("level", "is-flex")}>
-            <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
+          <div className={classNames("level", "is-flex", "pb-4")}>
+            <div className={classNames("level-left", "is-hidden-mobile", "mr-2")}>{footerLeft}</div>
             <InheritFlexShrinkDiv className="level-right is-block is-mobile m-0 shorten-text">
               {footerRight}
             </InheritFlexShrinkDiv>
-          </FooterWrapper>
-        </FlexFullHeight>
+          </div>
+        </div>
       </NoEventWrapper>
     </>
   );
diff --git a/scm-ui/ui-components/src/CardColumnGroup.tsx b/scm-ui/ui-components/src/CardColumnGroup.tsx
index d9a769a98c..aa8bef0eac 100644
--- a/scm-ui/ui-components/src/CardColumnGroup.tsx
+++ b/scm-ui/ui-components/src/CardColumnGroup.tsx
@@ -24,7 +24,6 @@
 import React, { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
-import styled from "styled-components";
 
 type Props = {
   name: ReactNode;
@@ -36,25 +35,17 @@ type State = {
   collapsed: boolean;
 };
 
-const Container = styled.div`
-  margin-bottom: 1em;
-`;
-
-const Wrapper = styled.div`
-  padding: 0 0.75rem;
-`;
-
 export default class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false
+      collapsed: false,
     };
   }
 
   toggleCollapse = () => {
-    this.setState(prevState => ({
-      collapsed: !prevState.collapsed
+    this.setState((prevState) => ({
+      collapsed: !prevState.collapsed,
     }));
   };
 
@@ -89,13 +80,13 @@ export default class CardColumnGroup extends React.Component<Props, State> {
     }
 
     return (
-      <Container>
+      <div className="mb-4">
         <h2>
-          <span className={classNames("is-size-4", "has-cursor-pointer")} onClick={this.toggleCollapse}>
+          <span className={classNames("is-size-4", "is-clickable")} onClick={this.toggleCollapse}>
             <i className={classNames("fa", icon)} />
           </span>{" "}
           {url ? (
-            <Link to={url} className={"has-text-dark"}>
+            <Link to={url} className="has-text-dark">
               {name}
             </Link>
           ) : (
@@ -103,9 +94,9 @@ export default class CardColumnGroup extends React.Component<Props, State> {
           )}
         </h2>
         <hr />
-        <Wrapper className={classNames("columns", "card-columns", "is-multiline")}>{content}</Wrapper>
+        <div className={classNames("columns", "card-columns", "is-multiline", "mx-3", "my-0")}>{content}</div>
         <div className="is-clearfix" />
-      </Container>
+      </div>
     );
   }
 }
diff --git a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
index eab79635cc..9d2f4b6ffc 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
@@ -35,7 +35,7 @@ const Wrapper = styled.div`
 
 const link = "/foo/bar";
 const icon = <Icon name="icons fa-2x fa-fw" />;
-const contentLeft = <strong className="is-marginless">main content</strong>;
+const contentLeft = <strong className="m-0">main content</strong>;
 const contentRight = <small>more text</small>;
 
 storiesOf("CardColumnSmall", module)
diff --git a/scm-ui/ui-components/src/CardColumnSmall.tsx b/scm-ui/ui-components/src/CardColumnSmall.tsx
index 2aaea5d834..80edec80f0 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.tsx
@@ -35,22 +35,6 @@ type Props = {
   footer?: ReactNode;
 };
 
-const FlexFullHeight = styled.div`
-  flex-direction: column;
-  justify-content: space-around;
-  align-self: stretch;
-`;
-
-const ContentLeft = styled.div`
-  margin-bottom: 0 !important;
-  overflow: hidden;
-`;
-
-const ContentRight = styled.div`
-  margin-left: auto;
-  align-items: start;
-`;
-
 const StyledLink = styled(Link)`
   color: inherit;
   :hover {
@@ -58,25 +42,30 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const AvatarWrapper = styled.figure`
-  margin-right: 0.5rem;
-`;
-
 const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, footer }) => {
-  const renderAvatar = avatar ? <AvatarWrapper className="media-left">{avatar}</AvatarWrapper> : null;
+  const renderAvatar = avatar ? <figure className={classNames("media-left", "mr-2")}>{avatar}</figure> : null;
   const renderFooter = footer ? <small>{footer}</small> : null;
 
   return (
     <StyledLink to={link}>
       <div className="media">
         {renderAvatar}
-        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
-          <div className="is-flex is-align-items-center">
-            <ContentLeft>{contentLeft}</ContentLeft>
-            <ContentRight>{contentRight}</ContentRight>
+        <div
+          className={classNames(
+            "media-content",
+            "text-box",
+            "is-flex",
+            "is-flex-direction-column",
+            "is-justify-content-space-around",
+            "is-align-self-stretch"
+          )}
+        >
+          <div className={classNames("is-flex", "is-align-items-center")}>
+            <div className={classNames("is-clipped", "mb-0")}>{contentLeft}</div>
+            <div className={classNames("is-align-items-start", "ml-auto")}>{contentRight}</div>
           </div>
           {renderFooter}
-        </FlexFullHeight>
+        </div>
       </div>
     </StyledLink>
   );
diff --git a/scm-ui/ui-components/src/Date.stories.tsx b/scm-ui/ui-components/src/Date.stories.tsx
index 4d2fe16fbe..6acf6ea9d9 100644
--- a/scm-ui/ui-components/src/Date.stories.tsx
+++ b/scm-ui/ui-components/src/Date.stories.tsx
@@ -22,43 +22,38 @@
  * SOFTWARE.
  */
 import React from "react";
-import DateFromNow from "./DateFromNow";
 import { storiesOf } from "@storybook/react";
+import DateFromNow from "./DateFromNow";
 import DateShort from "./DateShort";
-import styled from "styled-components";
 
 const baseProps = {
   timeZone: "Europe/Berlin",
-  baseDate: "2019-10-12T13:56:42+02:00"
+  baseDate: "2019-10-12T13:56:42+02:00",
 };
 
 const dates = [
   "2009-06-30T18:30:00+02:00",
   "2019-06-30T18:30:00+02:00",
   "2019-10-12T13:56:40+02:00",
-  "2019-10-11T13:56:40+02:00"
+  "2019-10-11T13:56:40+02:00",
 ];
 
-const Wrapper = styled.div`
-  padding: 2rem;
-`;
-
 storiesOf("Date", module)
   .add("Date from now", () => (
-    <Wrapper>
-      {dates.map(d => (
+    <div className="p-5">
+      {dates.map((d) => (
         <p>
           <DateFromNow date={d} {...baseProps} />
         </p>
       ))}
-    </Wrapper>
+    </div>
   ))
   .add("Short", () => (
-    <Wrapper>
-      {dates.map(d => (
+    <div className="p-5">
+      {dates.map((d) => (
         <p>
           <DateShort date={d} {...baseProps} />
         </p>
       ))}
-    </Wrapper>
+    </div>
   ));
diff --git a/scm-ui/ui-components/src/ErrorBoundary.tsx b/scm-ui/ui-components/src/ErrorBoundary.tsx
index 616e315498..0dfaef4d43 100644
--- a/scm-ui/ui-components/src/ErrorBoundary.tsx
+++ b/scm-ui/ui-components/src/ErrorBoundary.tsx
@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 import React, { FC, ReactNode, useEffect } from "react";
-import ErrorNotification from "./ErrorNotification";
-import { MissingLinkError, urls, useIndexLink } from "@scm-manager/ui-api";
 import { RouteComponentProps, useLocation, withRouter } from "react-router-dom";
-import ErrorPage from "./ErrorPage";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { MissingLinkError, urls, useIndexLink } from "@scm-manager/ui-api";
+import ErrorNotification from "./ErrorNotification";
+import ErrorPage from "./ErrorPage";
 import { Subtitle, Title } from "./layout";
 import Icon from "./Icon";
-import styled from "styled-components";
 
 type State = {
   error?: Error;
@@ -54,9 +55,6 @@ type ErrorDisplayProps = {
 };
 
 const RedirectIconContainer = styled.div`
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   min-height: 256px;
 `;
 
@@ -69,7 +67,14 @@ const RedirectPage = () => {
       <div className="container">
         <Title>{t("errorBoundary.redirect.title")}</Title>
         <Subtitle>{t("errorBoundary.redirect.subtitle")}</Subtitle>
-        <RedirectIconContainer className="is-flex">
+        <RedirectIconContainer
+          className={classNames(
+            "is-flex",
+            "is-flex-direction-column",
+            "is-justify-content-center",
+            "is-align-items-center"
+          )}
+        >
           <Icon name="directions" className="fa-7x" />
         </RedirectIconContainer>
       </div>
@@ -108,7 +113,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo
+    errorInfo,
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -130,7 +135,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo
+      errorInfo,
     });
   }
 
diff --git a/scm-ui/ui-components/src/Help.stories.tsx b/scm-ui/ui-components/src/Help.stories.tsx
index 6be7d02654..139c7164c1 100644
--- a/scm-ui/ui-components/src/Help.stories.tsx
+++ b/scm-ui/ui-components/src/Help.stories.tsx
@@ -21,20 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import styled from "styled-components";
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import Help from "./Help";
 
-const Wrapper = styled.div`
-  margin: 5rem;
-`;
-
-const Spacing = styled.div`
-  margin-top: 1rem;
-`;
-
 const longContent =
   "Cleverness nuclear genuine static irresponsibility invited President Zaphod\n" +
   "Beeblebrox hyperspace ship. Another custard through computer-generated universe\n" +
@@ -42,17 +32,17 @@ const longContent =
   "imaginative generator sweep.";
 
 storiesOf("Help", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <div className="m-6">{storyFn()}</div>)
   .add("Default", () => <Help message="This is a help message" />)
   .add("Multiline", () => (
     <>
-      <Spacing>
+      <div className="mt-4">
         <label>With multiline (default):</label>
         <Help message={longContent} />
-      </Spacing>
-      <Spacing>
+      </div>
+      <div className="mt-4">
         <label>Without multiline:</label>
         <Help message={longContent} multiline={false} />
-      </Spacing>
+      </div>
     </>
   ));
diff --git a/scm-ui/ui-components/src/Help.tsx b/scm-ui/ui-components/src/Help.tsx
index f49b49f1ca..82f7238e6d 100644
--- a/scm-ui/ui-components/src/Help.tsx
+++ b/scm-ui/ui-components/src/Help.tsx
@@ -33,22 +33,21 @@ type Props = {
   className?: string;
 };
 
-const HelpTooltip = styled(Tooltip)`
+const AbsolutePositionTooltip = styled(Tooltip)`
   position: absolute;
-  padding-left: 3px;
 `;
 
 const Help: FC<Props> = ({ message, multiline, className }) => (
-  <HelpTooltip
-    className={classNames("is-inline-block", multiline ? "has-tooltip-multiline" : undefined, className)}
+  <AbsolutePositionTooltip
+    className={classNames("is-inline-block", "pl-1", multiline ? "has-tooltip-multiline" : undefined, className)}
     message={message}
   >
     <HelpIcon />
-  </HelpTooltip>
+  </AbsolutePositionTooltip>
 );
 
 Help.defaultProps = {
-  multiline: true
+  multiline: true,
 };
 
 export default Help;
diff --git a/scm-ui/ui-components/src/Loading.tsx b/scm-ui/ui-components/src/Loading.tsx
index 4791ead93c..ec86c36f51 100644
--- a/scm-ui/ui-components/src/Loading.tsx
+++ b/scm-ui/ui-components/src/Loading.tsx
@@ -23,6 +23,7 @@
  */
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
+import classNames from "classnames";
 import styled from "styled-components";
 import Image from "./Image";
 
@@ -31,14 +32,10 @@ type Props = WithTranslation & {
 };
 
 const Wrapper = styled.div`
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   min-height: 256px;
 `;
 
 const FixedSizedImage = styled(Image)`
-  margin-bottom: 0.75rem;
   width: 128px;
   height: 128px;
 `;
@@ -47,8 +44,15 @@ class Loading extends React.Component<Props> {
   render() {
     const { message, t } = this.props;
     return (
-      <Wrapper className="is-flex">
-        <FixedSizedImage src="/images/loading.svg" alt={t("loading.alt")} />
+      <Wrapper
+        className={classNames(
+          "is-flex",
+          "is-flex-direction-column",
+          "is-justify-content-center",
+          "is-align-items-center"
+        )}
+      >
+        <FixedSizedImage className="mb-3" src="/images/loading.svg" alt={t("loading.alt")} />
         <p className="has-text-centered">{message}</p>
       </Wrapper>
     );
diff --git a/scm-ui/ui-components/src/OverviewPageActions.tsx b/scm-ui/ui-components/src/OverviewPageActions.tsx
index 2eb060e816..bbd5fac697 100644
--- a/scm-ui/ui-components/src/OverviewPageActions.tsx
+++ b/scm-ui/ui-components/src/OverviewPageActions.tsx
@@ -60,9 +60,9 @@ const OverviewPageActions: FC<Props> = ({
   const link = createAbsoluteLink(inputLink);
 
   const groupSelector = groups && (
-    <div className={"column is-flex"}>
+    <div className="column is-flex">
       <Select
-        className={"is-fullwidth"}
+        className="is-fullwidth"
         options={groups.map((g) => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
@@ -89,9 +89,9 @@ const OverviewPageActions: FC<Props> = ({
   };
 
   return (
-    <div className={"columns is-tablet"}>
+    <div className="columns is-tablet">
       {groupSelector}
-      <div className={"column"}>
+      <div className="column">
         <FilterInput
           placeholder={searchPlaceholder}
           value={urls.getQueryStringFromLocation(location)}
diff --git a/scm-ui/ui-components/src/SplitAndReplace.stories.tsx b/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
index a6d40a5195..8dbf553ef4 100644
--- a/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
+++ b/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
@@ -21,37 +21,33 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from "react";
+import { Icon } from "@scm-manager/ui-components";
 import { storiesOf } from "@storybook/react";
 import SplitAndReplace from "./SplitAndReplace";
-import { Icon } from "@scm-manager/ui-components";
-import styled from "styled-components";
-
-const Wrapper = styled.div`
-  margin: 2rem;
-`;
 
 storiesOf("SplitAndReplace", module).add("Simple replacement", () => {
   const replacements = [
     {
       textToReplace: "'",
       replacement: <Icon name={"quote-left"} />,
-      replaceAll: true
+      replaceAll: true,
     },
     {
       textToReplace: "`",
       replacement: <Icon name={"quote-right"} />,
-      replaceAll: true
-    }
+      replaceAll: true,
+    },
   ];
   return (
     <>
-      <Wrapper>
+      <div className="m-6">
         <SplitAndReplace text={"'So this is it,` said Arthur, 'We are going to die.`"} replacements={replacements} />
-      </Wrapper>
-      <Wrapper>
+      </div>
+      <div className="m-6">
         <SplitAndReplace text={"'Yes,` said Ford, 'except... no! Wait a minute!`"} replacements={replacements} />
-      </Wrapper>
+      </div>
     </>
   );
 });
diff --git a/scm-ui/ui-components/src/Tag.tsx b/scm-ui/ui-components/src/Tag.tsx
index 7fc9ae4493..b1f0840c76 100644
--- a/scm-ui/ui-components/src/Tag.tsx
+++ b/scm-ui/ui-components/src/Tag.tsx
@@ -21,10 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, HTMLAttributes } from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 import { Color, Size } from "./styleConstants";
-import styled, { css } from "styled-components";
 
 type Props = {
   className?: string;
@@ -39,19 +38,7 @@ type Props = {
   onRemove?: () => void;
 };
 
-type InnerTagProps = HTMLAttributes<HTMLSpanElement> & {
-  small: boolean;
-};
-
-const smallMixin = css`
-  font-size: 0.7rem !important;
-  padding: 0.25rem !important;
-  font-weight: bold;
-`;
-
-const InnerTag = styled.span<InnerTagProps>`
-  ${(props) => props.small && smallMixin};
-`;
+const smallClassNames = classNames("p-1", "is-size-7", "has-text-weight-bold");
 
 const Tag: FC<Props> = ({
   className,
@@ -82,20 +69,26 @@ const Tag: FC<Props> = ({
 
   return (
     <>
-      <InnerTag
-        className={classNames("tag", `is-${color}`, `is-${size}`, className, {
-          "is-outlined": outlined,
-          "is-rounded": rounded,
-          "has-cursor-pointer": onClick,
-        })}
+      <span
+        className={classNames(
+          "tag",
+          `is-${color}`,
+          `is-${size}`,
+          className,
+          {
+            "is-outlined": outlined,
+            "is-rounded": rounded,
+            "is-clickable": onClick,
+          },
+          size === "small" && smallClassNames
+        )}
         title={title}
         onClick={onClick}
-        small={size === "small"}
       >
         {showIcon}
         {label}
         {children}
-      </InnerTag>
+      </span>
       {showDelete}
     </>
   );
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index a0cc61cf35..6d32a2e9bd 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -8,7 +8,7 @@ exports[`Storyshots Annotate Default 1`] = `
     className="panel-block"
   >
     <pre
-      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
+      className="m-0 p-0"
       style={
         Object {
           "MozHyphens": "none",
@@ -74,7 +74,7 @@ exports[`Storyshots Annotate Default 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -154,7 +154,7 @@ exports[`Storyshots Annotate Default 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -254,7 +254,7 @@ exports[`Storyshots Annotate Default 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -366,7 +366,7 @@ exports[`Storyshots Annotate Default 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -468,7 +468,7 @@ exports[`Storyshots Annotate Default 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -558,7 +558,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
     className="panel-block"
   >
     <pre
-      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
+      className="m-0 p-0"
       style={
         Object {
           "MozHyphens": "none",
@@ -624,7 +624,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -716,7 +716,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -782,7 +782,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -903,7 +903,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -946,7 +946,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1036,7 +1036,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
     className="panel-block"
   >
     <pre
-      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
+      className="m-0 p-0"
       style={
         Object {
           "MozHyphens": "none",
@@ -1107,7 +1107,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1192,7 +1192,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1297,7 +1297,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1414,7 +1414,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1521,7 +1521,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
             </div>
              
             <div
-              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB izaUZh"
+              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 egJUkB iiVwcn"
             >
               <time
                 className="DateElement-sc-1schp8c-0 cinWxa"
@@ -1623,7 +1623,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
       className="field-body"
     >
       <div
-        className="BranchSelector__NoBottomMarginField-sc-1120xyr-2 ebTLsS field is-narrow"
+        className="field is-narrow mb-0"
       >
         <div
           className="BranchSelector__MinWidthControl-sc-1120xyr-1 cpKDZJ control"
@@ -1665,7 +1665,7 @@ exports[`Storyshots BreadCrumb Default 1`] = `
   className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 exRctT"
 >
   <div
-    className="is-flex is-align-items-center is-justify-content-flex-end"
+    className="is-flex is-justify-content-flex-end is-align-items-center"
   >
     <nav
       aria-label="breadcrumbs"
@@ -1751,11 +1751,11 @@ exports[`Storyshots BreadCrumb Default 1`] = `
       </span>
     </nav>
     <div
-      className="Breadcrumb__ActionBar-zvtb4t-3 izqSnl my-2"
+      className="Breadcrumb__ActionBar-zvtb4t-3 ffeyDa is-flex is-justify-content-flex-start is-align-self-center my-2"
     />
   </div>
   <hr
-    className="is-marginless"
+    className="m-0"
   />
 </div>
 `;
@@ -1765,7 +1765,7 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
   className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 exRctT"
 >
   <div
-    className="is-flex is-align-items-center is-justify-content-flex-end"
+    className="is-flex is-justify-content-flex-end is-align-items-center"
   >
     <nav
       aria-label="breadcrumbs"
@@ -1901,11 +1901,122 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
       </span>
     </nav>
     <div
-      className="Breadcrumb__ActionBar-zvtb4t-3 izqSnl my-2"
+      className="Breadcrumb__ActionBar-zvtb4t-3 ffeyDa is-flex is-justify-content-flex-start is-align-self-center my-2"
     />
   </div>
   <hr
-    className="is-marginless"
+    className="m-0"
+  />
+</div>
+`;
+
+exports[`Storyshots BreadCrumb With prefix button 1`] = `
+<div
+  className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 exRctT"
+>
+  <div
+    className="is-flex is-justify-content-flex-end is-align-items-center"
+  >
+    <nav
+      aria-label="breadcrumbs"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+    >
+      <div
+        className="Breadcrumb__PrefixButton-zvtb4t-4 fsMznZ mr-2"
+      >
+        <a
+          href="#link"
+        >
+          <i
+            className="fas fa-heart has-text-danger"
+          />
+        </a>
+      </div>
+      <ul>
+        <li>
+          <a
+            href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/"
+            onClick={[Function]}
+          >
+            <i
+              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-zvtb4t-2 inWuJD"
+              title="breadcrumb.home"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            className="is-ellipsis-overflow"
+            href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/src/"
+            onClick={[Function]}
+            title="src"
+          >
+            src
+          </a>
+        </li>
+        <li>
+          <a
+            className="is-ellipsis-overflow"
+            href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/src/main/"
+            onClick={[Function]}
+            title="main"
+          >
+            main
+          </a>
+        </li>
+        <li>
+          <a
+            className="is-ellipsis-overflow"
+            href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/src/main/java/"
+            onClick={[Function]}
+            title="java"
+          >
+            java
+          </a>
+        </li>
+        <li>
+          <a
+            className="is-ellipsis-overflow"
+            href="/scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources/1/src/main/java/com/"
+            onClick={[Function]}
+            title="com"
+          >
+            com
+          </a>
+        </li>
+        <li
+          className="is-active"
+        >
+          <a
+            aria-current="page"
+            className="is-ellipsis-overflow"
+            href="/"
+            onClick={[Function]}
+          >
+            cloudogu
+          </a>
+        </li>
+      </ul>
+      <span
+        className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 OWytj ml-1"
+      >
+        <span
+          className="tooltip has-tooltip-right"
+          data-tooltip="breadcrumb.copyPermalink"
+        >
+          <i
+            className="fas fa-link has-text-inherit"
+            onClick={[Function]}
+          />
+        </span>
+      </span>
+    </nav>
+    <div
+      className="Breadcrumb__ActionBar-zvtb4t-3 ffeyDa is-flex is-justify-content-flex-start is-align-self-center my-2"
+    />
+  </div>
+  <hr
+    className="m-0"
   />
 </div>
 `;
@@ -2239,7 +2350,7 @@ exports[`Storyshots Buttons|CreateButton Default 1`] = `
   className="indexstories__Spacing-bpoict-0 ieMGHp"
 >
   <div
-    className="CreateButton__Wrapper-f29oo-0 goGUMs has-text-centered"
+    className="CreateButton__Wrapper-f29oo-0 dIjnOP has-text-centered mt-5 p-4"
   >
     <button
       className="button is-primary"
@@ -2369,14 +2480,14 @@ exports[`Storyshots CardColumn Default 1`] = `
     className="CardColumn__NoEventWrapper-sc-1w6lsih-0 cvqkqR media"
   >
     <figure
-      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 jBSrYP media-left"
+      className="media-left mt-3 ml-4"
     >
       <i
         className="fas fa-icons fa-2x fa-fw has-text-grey-light"
       />
     </figure>
     <div
-      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 dvHFki media-content text-box is-flex"
+      className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
     >
       <div
         className="is-flex"
@@ -2399,17 +2510,17 @@ exports[`Storyshots CardColumn Default 1`] = `
         </div>
       </div>
       <div
-        className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
+        className="level is-flex pb-4"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
+          className="level-left is-hidden-mobile mr-2"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-1 fFtOvz level-right is-block is-mobile m-0 shorten-text"
         >
           <small>
             right footer
@@ -2429,7 +2540,7 @@ exports[`Storyshots CardColumn Minimal 1`] = `
     className="CardColumn__NoEventWrapper-sc-1w6lsih-0 cvqkqR media"
   >
     <div
-      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 dvHFki media-content text-box is-flex"
+      className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
     >
       <div
         className="is-flex"
@@ -2447,17 +2558,17 @@ exports[`Storyshots CardColumn Minimal 1`] = `
         </div>
       </div>
       <div
-        className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
+        className="level is-flex pb-4"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
+          className="level-left is-hidden-mobile mr-2"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-1 fFtOvz level-right is-block is-mobile m-0 shorten-text"
         >
           <small>
             right footer
@@ -2477,7 +2588,7 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
     className="CardColumn__NoEventWrapper-sc-1w6lsih-0 cvqkqR media"
   >
     <div
-      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 dvHFki media-content text-box is-flex"
+      className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
     >
       <div
         className="is-flex"
@@ -2495,17 +2606,17 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
         </div>
       </div>
       <div
-        className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
+        className="level is-flex pb-4"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
+          className="level-left is-hidden-mobile mr-2"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-1 fFtOvz level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -2529,7 +2640,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
   className="CardColumnSmallstories__Wrapper-ofr817-0 hUFZIW"
 >
   <a
-    className="CardColumnSmall__StyledLink-tk9h0o-3 kWgzFD"
+    className="CardColumnSmall__StyledLink-tk9h0o-0 eXYQYs"
     href="/foo/bar"
     onClick={[Function]}
   >
@@ -2537,29 +2648,29 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
       className="media"
     >
       <figure
-        className="CardColumnSmall__AvatarWrapper-tk9h0o-4 hAIwaA media-left"
+        className="media-left mr-2"
       >
         <i
           className="fas fa-icons fa-2x fa-fw has-text-grey-light"
         />
       </figure>
       <div
-        className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kyyXR media-content text-box is-flex"
+        className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
       >
         <div
           className="is-flex is-align-items-center"
         >
           <div
-            className="CardColumnSmall__ContentLeft-tk9h0o-1 jjJzjT"
+            className="is-clipped mb-0"
           >
             <strong
-              className="is-marginless"
+              className="m-0"
             >
               main content
             </strong>
           </div>
           <div
-            className="CardColumnSmall__ContentRight-tk9h0o-2 fqDXon"
+            className="is-align-items-start ml-auto"
           >
             <small>
               more text
@@ -2577,7 +2688,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
   className="CardColumnSmallstories__Wrapper-ofr817-0 hUFZIW"
 >
   <a
-    className="CardColumnSmall__StyledLink-tk9h0o-3 kWgzFD"
+    className="CardColumnSmall__StyledLink-tk9h0o-0 eXYQYs"
     href="/foo/bar"
     onClick={[Function]}
   >
@@ -2585,22 +2696,22 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
       className="media"
     >
       <div
-        className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kyyXR media-content text-box is-flex"
+        className="media-content text-box is-flex is-flex-direction-column is-justify-content-space-around is-align-self-stretch"
       >
         <div
           className="is-flex is-align-items-center"
         >
           <div
-            className="CardColumnSmall__ContentLeft-tk9h0o-1 jjJzjT"
+            className="is-clipped mb-0"
           >
             <strong
-              className="is-marginless"
+              className="m-0"
             >
               main content
             </strong>
           </div>
           <div
-            className="CardColumnSmall__ContentRight-tk9h0o-2 fqDXon"
+            className="is-align-items-start ml-auto"
           >
             <small>
               more text
@@ -2636,10 +2747,10 @@ exports[`Storyshots Changesets Co-Authors with avatar 1`] = `
               className="media"
             >
               <figure
-                className="ChangesetRow__AvatarFigure-tkpti5-1 juzgIJ media-left"
+                className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-2 eckHbd image"
+                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -2649,7 +2760,7 @@ exports[`Storyshots Changesets Co-Authors with avatar 1`] = `
                 </div>
               </figure>
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -2665,10 +2776,10 @@ exports[`Storyshots Changesets Co-Authors with avatar 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -2724,15 +2835,15 @@ exports[`Storyshots Changesets Co-Authors with avatar 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -2806,10 +2917,10 @@ exports[`Storyshots Changesets Commiter and Co-Authors with avatar 1`] = `
               className="media"
             >
               <figure
-                className="ChangesetRow__AvatarFigure-tkpti5-1 juzgIJ media-left"
+                className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-2 eckHbd image"
+                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -2819,7 +2930,7 @@ exports[`Storyshots Changesets Commiter and Co-Authors with avatar 1`] = `
                 </div>
               </figure>
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -2835,10 +2946,10 @@ exports[`Storyshots Changesets Commiter and Co-Authors with avatar 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -2883,15 +2994,15 @@ exports[`Storyshots Changesets Commiter and Co-Authors with avatar 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -2965,7 +3076,7 @@ exports[`Storyshots Changesets Default 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -2981,10 +3092,10 @@ exports[`Storyshots Changesets Default 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3000,15 +3111,15 @@ exports[`Storyshots Changesets Default 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3082,7 +3193,7 @@ exports[`Storyshots Changesets Replacements 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3108,10 +3219,10 @@ exports[`Storyshots Changesets Replacements 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3127,15 +3238,15 @@ exports[`Storyshots Changesets Replacements 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3209,7 +3320,7 @@ exports[`Storyshots Changesets With Committer 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3225,10 +3336,10 @@ exports[`Storyshots Changesets With Committer 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3256,15 +3367,15 @@ exports[`Storyshots Changesets With Committer 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3338,7 +3449,7 @@ exports[`Storyshots Changesets With Committer and Co-Author 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3354,10 +3465,10 @@ exports[`Storyshots Changesets With Committer and Co-Author 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3394,15 +3505,15 @@ exports[`Storyshots Changesets With Committer and Co-Author 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3476,10 +3587,10 @@ exports[`Storyshots Changesets With avatar 1`] = `
               className="media"
             >
               <figure
-                className="ChangesetRow__AvatarFigure-tkpti5-1 juzgIJ media-left"
+                className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-2 eckHbd image"
+                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -3489,7 +3600,7 @@ exports[`Storyshots Changesets With avatar 1`] = `
                 </div>
               </figure>
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3505,10 +3616,10 @@ exports[`Storyshots Changesets With avatar 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3524,15 +3635,15 @@ exports[`Storyshots Changesets With avatar 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3606,7 +3717,7 @@ exports[`Storyshots Changesets With contactless signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3622,10 +3733,10 @@ exports[`Storyshots Changesets With contactless signature 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3649,15 +3760,15 @@ exports[`Storyshots Changesets With contactless signature 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3731,7 +3842,7 @@ exports[`Storyshots Changesets With invalid signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3747,10 +3858,10 @@ exports[`Storyshots Changesets With invalid signature 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3774,15 +3885,15 @@ exports[`Storyshots Changesets With invalid signature 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3856,7 +3967,7 @@ exports[`Storyshots Changesets With multiple Co-Authors 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -3872,10 +3983,10 @@ exports[`Storyshots Changesets With multiple Co-Authors 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -3904,15 +4015,15 @@ exports[`Storyshots Changesets With multiple Co-Authors 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -3986,7 +4097,7 @@ exports[`Storyshots Changesets With multiple signatures and invalid status 1`] =
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4002,10 +4113,10 @@ exports[`Storyshots Changesets With multiple signatures and invalid status 1`] =
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4029,15 +4140,15 @@ exports[`Storyshots Changesets With multiple signatures and invalid status 1`] =
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4111,7 +4222,7 @@ exports[`Storyshots Changesets With multiple signatures and not found status 1`]
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4127,10 +4238,10 @@ exports[`Storyshots Changesets With multiple signatures and not found status 1`]
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4154,15 +4265,15 @@ exports[`Storyshots Changesets With multiple signatures and not found status 1`]
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4236,7 +4347,7 @@ exports[`Storyshots Changesets With multiple signatures and valid status 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4252,10 +4363,10 @@ exports[`Storyshots Changesets With multiple signatures and valid status 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4279,15 +4390,15 @@ exports[`Storyshots Changesets With multiple signatures and valid status 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4361,7 +4472,7 @@ exports[`Storyshots Changesets With unknown signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4377,10 +4488,10 @@ exports[`Storyshots Changesets With unknown signature 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4404,15 +4515,15 @@ exports[`Storyshots Changesets With unknown signature 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4486,7 +4597,7 @@ exports[`Storyshots Changesets With unowned signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4502,10 +4613,10 @@ exports[`Storyshots Changesets With unowned signature 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4529,15 +4640,15 @@ exports[`Storyshots Changesets With unowned signature 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4611,7 +4722,7 @@ exports[`Storyshots Changesets With valid signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__Metadata-tkpti5-3 fZKtaU media-right"
+                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -4627,10 +4738,10 @@ exports[`Storyshots Changesets With valid signature 1`] = `
                   className="is-hidden-desktop"
                 />
                 <div
-                  className="ChangesetRow__FlexRow-tkpti5-7 kOBqYq"
+                  className="is-flex"
                 >
                   <p
-                    className="ChangesetRow__AuthorWrapper-tkpti5-4 eRNifS is-size-7 is-ellipsis-overflow"
+                    className="is-size-7 is-ellipsis-overflow mt-2"
                   >
                     changeset.contributors.authoredBy
                      
@@ -4654,15 +4765,15 @@ exports[`Storyshots Changesets With valid signature 1`] = `
             </div>
           </div>
           <div
-            className="ChangesetRow__VCenteredColumn-tkpti5-5 fsJQpx column"
+            className="column is-align-self-center"
           />
         </div>
       </div>
       <div
-        className="ChangesetRow__VCenteredChildColumn-tkpti5-6 jftDKU column is-flex"
+        className="column is-flex is-justify-content-flex-end is-align-items-center"
       >
         <div
-          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons is-marginless"
+          className="ButtonAddons__Flex-sc-182golj-0 iPjkTn field has-addons m-0"
         >
           <p
             className="control"
@@ -4715,7 +4826,7 @@ exports[`Storyshots Changesets With valid signature 1`] = `
 
 exports[`Storyshots Date Date from now 1`] = `
 <div
-  className="Datestories__Wrapper-sc-1uda3v2-0 iyPRuI"
+  className="p-5"
 >
   <p>
     <time
@@ -4754,7 +4865,7 @@ exports[`Storyshots Date Date from now 1`] = `
 
 exports[`Storyshots Date Short 1`] = `
 <div
-  className="Datestories__Wrapper-sc-1uda3v2-0 iyPRuI"
+  className="p-5"
 >
   <p>
     <time
@@ -4807,7 +4918,7 @@ exports[`Storyshots Diff Binaries 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -4815,18 +4926,18 @@ exports[`Storyshots Diff Binaries 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -4840,7 +4951,7 @@ exports[`Storyshots Diff Binaries 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -4871,7 +4982,7 @@ exports[`Storyshots Diff Binaries 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -5029,23 +5140,23 @@ exports[`Storyshots Diff Binaries 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="conflict.png"
           >
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               conflict.png
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               add
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -5054,7 +5165,7 @@ exports[`Storyshots Diff Binaries 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -5101,7 +5212,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
             >
@@ -5109,18 +5220,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/java/com/cloudogu/scm/review/events/EventListener.java
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -5134,7 +5245,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -5165,7 +5276,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -5678,10 +5789,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -5692,7 +5803,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -5719,7 +5830,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="src/main/js/ChangeNotification.tsx"
             >
@@ -5727,18 +5838,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/js/ChangeNotification.tsx
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -5752,7 +5863,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -5783,7 +5894,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -5807,10 +5918,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6009,10 +6120,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6034,10 +6145,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6633,10 +6744,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6647,7 +6758,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6674,7 +6785,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="src/main/resources/locales/de/plugins.json"
             >
@@ -6682,18 +6793,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/resources/locales/de/plugins.json
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -6707,7 +6818,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6738,7 +6849,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -6762,10 +6873,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -6776,7 +6887,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7159,10 +7270,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7173,7 +7284,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7200,7 +7311,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="src/main/resources/locales/en/plugins.json"
             >
@@ -7208,18 +7319,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/resources/locales/en/plugins.json
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -7233,7 +7344,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7264,7 +7375,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -7288,10 +7399,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7302,7 +7413,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7685,10 +7796,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7699,7 +7810,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7726,7 +7837,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
             >
@@ -7734,18 +7845,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/test/java/com/cloudogu/scm/review/events/ClientTest.java
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -7759,7 +7870,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -7790,7 +7901,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -7814,10 +7925,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8333,10 +8444,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8347,7 +8458,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8369,10 +8480,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8383,7 +8494,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8605,10 +8716,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8630,10 +8741,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8901,10 +9012,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8915,7 +9026,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -8942,7 +9053,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
             className="level is-flex-wrap-wrap"
           >
             <div
-              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+              className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
               onClick={[Function]}
               title="Main.java"
             >
@@ -8950,18 +9061,18 @@ exports[`Storyshots Diff Changing Content 1`] = `
                 className="fas fa-angle-down has-text-inherit"
               />
               <span
-                className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+                className="is-ellipsis-overflow is-size-6 ml-1"
               >
                 Main.java
               </span>
               <span
-                className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+                className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
                 modify
               </span>
             </div>
             <div
-              className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+              className="level-right is-flex ml-auto"
             >
               <div
                 className="field is-grouped"
@@ -8975,7 +9086,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   >
                     <a
                       aria-label="diff.sideBySide"
-                      className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                      className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -9006,7 +9117,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
           </div>
         </div>
         <div
-          className="panel-block is-paddingless"
+          className="panel-block p-0"
         >
           <table
             className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -9467,10 +9578,10 @@ exports[`Storyshots Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                   >
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -9481,7 +9592,7 @@ exports[`Storyshots Diff Changing Content 1`] = `
                     </span>
                      
                     <span
-                      className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                      className="is-clickable"
                       onClick={[Function]}
                     >
                       <i
@@ -9518,7 +9629,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -9526,18 +9637,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -9551,7 +9662,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -9586,7 +9697,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/src/main/java/com/cloudogu/scm/review/events/EventListener.java/"
                     onClick={[Function]}
                   >
@@ -9605,7 +9716,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/src/main/java/com/cloudogu/scm/review/events/EventListener.java"
                     onClick={[Function]}
                   >
@@ -9631,7 +9742,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -9639,18 +9750,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -9664,7 +9775,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -9699,7 +9810,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/src/main/js/ChangeNotification.tsx/"
                     onClick={[Function]}
                   >
@@ -9718,7 +9829,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/src/main/js/ChangeNotification.tsx"
                     onClick={[Function]}
                   >
@@ -9744,7 +9855,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -9752,18 +9863,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -9777,7 +9888,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -9812,7 +9923,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/src/main/resources/locales/de/plugins.json/"
                     onClick={[Function]}
                   >
@@ -9831,7 +9942,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/src/main/resources/locales/de/plugins.json"
                     onClick={[Function]}
                   >
@@ -9857,7 +9968,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -9865,18 +9976,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -9890,7 +10001,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -9925,7 +10036,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/src/main/resources/locales/en/plugins.json/"
                     onClick={[Function]}
                   >
@@ -9944,7 +10055,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/src/main/resources/locales/en/plugins.json"
                     onClick={[Function]}
                   >
@@ -9970,7 +10081,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -9978,18 +10089,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -10003,7 +10114,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -10038,7 +10149,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/src/test/java/com/cloudogu/scm/review/events/ClientTest.java/"
                     onClick={[Function]}
                   >
@@ -10057,7 +10168,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
                     onClick={[Function]}
                   >
@@ -10083,7 +10194,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -10091,18 +10202,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -10116,7 +10227,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -10151,7 +10262,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to source"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/d21cc6c359270aef2196796f4d96af65f51866dc/Main.java/"
                     onClick={[Function]}
                   >
@@ -10170,7 +10281,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
                 >
                   <a
                     aria-label="Jump to target"
-                    className="JumpToFileButton__Button-sc-72e4b2-0 hhzgyb button"
+                    className="JumpToFileButton__Button-sc-72e4b2-0 fQUHyb button is-clickable"
                     href="/repo/hitchhiker/heartOfGold/code/changeset/e163c8f632db571c9aa51a8eb440e37cf550b825/Main.java"
                     onClick={[Function]}
                   >
@@ -10205,7 +10316,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -10213,18 +10324,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -10238,7 +10349,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -10280,7 +10391,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -10288,18 +10399,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -10313,7 +10424,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -10344,7 +10455,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -10545,7 +10656,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -11138,7 +11249,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -11146,18 +11257,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -11171,7 +11282,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -11202,7 +11313,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -11592,7 +11703,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -11600,18 +11711,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -11625,7 +11736,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -11656,7 +11767,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -12046,7 +12157,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -12054,18 +12165,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -12079,7 +12190,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -12121,7 +12232,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -12129,18 +12240,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               className="fas fa-angle-right has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -12154,7 +12265,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -12205,7 +12316,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -12213,18 +12324,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -12238,7 +12349,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -12269,7 +12380,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -12786,7 +12897,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -12794,18 +12905,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -12819,7 +12930,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -12850,7 +12961,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -13051,7 +13162,7 @@ exports[`Storyshots Diff Default 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -13644,7 +13755,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -13652,18 +13763,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -13677,7 +13788,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -13708,7 +13819,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -14098,7 +14209,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -14106,18 +14217,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -14131,7 +14242,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -14162,7 +14273,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -14552,7 +14663,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -14560,18 +14671,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -14585,7 +14696,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -14616,7 +14727,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -15134,7 +15245,7 @@ exports[`Storyshots Diff Default 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -15348,7 +15459,7 @@ exports[`Storyshots Diff Default 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -15613,7 +15724,7 @@ exports[`Storyshots Diff Default 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -15621,18 +15732,18 @@ exports[`Storyshots Diff Default 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -15646,7 +15757,7 @@ exports[`Storyshots Diff Default 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -15677,7 +15788,7 @@ exports[`Storyshots Diff Default 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -16151,7 +16262,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -16159,18 +16270,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -16184,7 +16295,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -16215,7 +16326,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -16728,10 +16839,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -16742,7 +16853,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -16769,7 +16880,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -16777,18 +16888,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -16802,7 +16913,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -16833,7 +16944,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -16857,10 +16968,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17059,10 +17170,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17084,10 +17195,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17683,10 +17794,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17697,7 +17808,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17724,7 +17835,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -17732,18 +17843,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -17757,7 +17868,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17788,7 +17899,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -17812,10 +17923,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -17826,7 +17937,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18209,10 +18320,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18223,7 +18334,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18250,7 +18361,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -18258,18 +18369,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -18283,7 +18394,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18314,7 +18425,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -18338,10 +18449,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18352,7 +18463,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18735,10 +18846,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18749,7 +18860,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18776,7 +18887,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -18784,18 +18895,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -18809,7 +18920,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -18840,7 +18951,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -18864,10 +18975,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19383,10 +19494,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19397,7 +19508,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19419,10 +19530,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19433,7 +19544,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19655,10 +19766,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19680,10 +19791,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19951,10 +20062,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19965,7 +20076,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -19992,7 +20103,7 @@ exports[`Storyshots Diff Expandable 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -20000,18 +20111,18 @@ exports[`Storyshots Diff Expandable 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -20025,7 +20136,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -20056,7 +20167,7 @@ exports[`Storyshots Diff Expandable 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -20517,10 +20628,10 @@ exports[`Storyshots Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -20531,7 +20642,7 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -20567,7 +20678,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -20575,18 +20686,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -20600,7 +20711,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -20631,7 +20742,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -21144,10 +21255,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -21158,7 +21269,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -21185,7 +21296,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -21193,18 +21304,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -21218,7 +21329,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -21249,7 +21360,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -21273,10 +21384,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -21475,10 +21586,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -21500,10 +21611,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22099,10 +22210,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22113,7 +22224,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22140,7 +22251,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -22148,18 +22259,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -22173,7 +22284,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22204,7 +22315,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -22228,10 +22339,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22242,7 +22353,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22625,10 +22736,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22639,7 +22750,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22666,7 +22777,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -22674,18 +22785,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -22699,7 +22810,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22730,7 +22841,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -22754,10 +22865,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -22768,7 +22879,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23151,10 +23262,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23165,7 +23276,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23192,7 +23303,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -23200,18 +23311,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -23225,7 +23336,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23256,7 +23367,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -23280,10 +23391,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23799,10 +23910,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23813,7 +23924,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23835,10 +23946,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -23849,7 +23960,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24071,10 +24182,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24096,10 +24207,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24367,10 +24478,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24381,7 +24492,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24408,7 +24519,7 @@ exports[`Storyshots Diff External state management 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -24416,18 +24527,18 @@ exports[`Storyshots Diff External state management 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -24441,7 +24552,7 @@ exports[`Storyshots Diff External state management 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24472,7 +24583,7 @@ exports[`Storyshots Diff External state management 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -24933,10 +25044,10 @@ exports[`Storyshots Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24947,7 +25058,7 @@ exports[`Storyshots Diff External state management 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -24983,7 +25094,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -24991,18 +25102,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -25016,7 +25127,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -25047,7 +25158,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -25568,7 +25679,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -25576,18 +25687,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -25601,7 +25712,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -25632,7 +25743,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -25837,7 +25948,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -26430,7 +26541,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -26438,18 +26549,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -26463,7 +26574,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -26494,7 +26605,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -26888,7 +26999,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -26896,18 +27007,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -26921,7 +27032,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -26952,7 +27063,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -27346,7 +27457,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -27354,18 +27465,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -27379,7 +27490,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -27410,7 +27521,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -27932,7 +28043,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -28146,7 +28257,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -28411,7 +28522,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -28419,18 +28530,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -28444,7 +28555,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -28475,7 +28586,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <p>
           Custom File annotation for 
@@ -28953,7 +29064,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -28961,18 +29072,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -28986,7 +29097,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -29021,7 +29132,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -29035,7 +29146,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -29552,7 +29663,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -29560,18 +29671,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -29585,7 +29696,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -29620,7 +29731,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -29634,7 +29745,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -29835,7 +29946,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -30428,7 +30539,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -30436,18 +30547,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -30461,7 +30572,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -30496,7 +30607,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -30510,7 +30621,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -30900,7 +31011,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -30908,18 +31019,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -30933,7 +31044,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -30968,7 +31079,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -30982,7 +31093,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -31372,7 +31483,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -31380,18 +31491,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -31405,7 +31516,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -31440,7 +31551,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -31454,7 +31565,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -31972,7 +32083,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -32186,7 +32297,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -32451,7 +32562,7 @@ exports[`Storyshots Diff File Controls 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -32459,18 +32570,18 @@ exports[`Storyshots Diff File Controls 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -32484,7 +32595,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -32519,7 +32630,7 @@ exports[`Storyshots Diff File Controls 1`] = `
                 >
                   <a
                     aria-label="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -32533,7 +32644,7 @@ exports[`Storyshots Diff File Controls 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -33007,7 +33118,7 @@ exports[`Storyshots Diff Hunks 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java"
           >
@@ -33015,18 +33126,18 @@ exports[`Storyshots Diff Hunks 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -33040,7 +33151,7 @@ exports[`Storyshots Diff Hunks 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -33071,7 +33182,7 @@ exports[`Storyshots Diff Hunks 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -33295,7 +33406,7 @@ exports[`Storyshots Diff Hunks 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -33486,7 +33597,7 @@ exports[`Storyshots Diff Hunks 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -33852,7 +33963,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -33860,18 +33971,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -33885,7 +33996,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -33916,7 +34027,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -34445,7 +34556,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -34453,18 +34564,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -34478,7 +34589,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -34509,7 +34620,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -34722,7 +34833,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -35315,7 +35426,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -35323,18 +35434,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -35348,7 +35459,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -35379,7 +35490,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -35769,7 +35880,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -35777,18 +35888,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -35802,7 +35913,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -35833,7 +35944,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -36223,7 +36334,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -36231,18 +36342,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -36256,7 +36367,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -36287,7 +36398,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -36805,7 +36916,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -37019,7 +37130,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -37284,7 +37395,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -37292,18 +37403,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -37317,7 +37428,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -37348,7 +37459,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -37834,7 +37945,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -37842,18 +37953,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -37867,7 +37978,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -37898,7 +38009,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -38455,7 +38566,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -38463,18 +38574,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -38488,7 +38599,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -38519,7 +38630,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -38734,7 +38845,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -39375,7 +39486,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -39383,18 +39494,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -39408,7 +39519,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -39439,7 +39550,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -39859,7 +39970,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -39867,18 +39978,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -39892,7 +40003,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -39923,7 +40034,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -40343,7 +40454,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -40351,18 +40462,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -40376,7 +40487,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -40407,7 +40518,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -40965,7 +41076,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -41195,7 +41306,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -41480,7 +41591,7 @@ exports[`Storyshots Diff OnClick 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -41488,18 +41599,18 @@ exports[`Storyshots Diff OnClick 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -41513,7 +41624,7 @@ exports[`Storyshots Diff OnClick 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -41544,7 +41655,7 @@ exports[`Storyshots Diff OnClick 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -42054,7 +42165,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -42062,18 +42173,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -42087,7 +42198,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -42118,7 +42229,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -42728,7 +42839,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -42736,18 +42847,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -42761,7 +42872,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -42792,7 +42903,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -43037,7 +43148,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 colSpan={4}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -43676,7 +43787,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -43684,18 +43795,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -43709,7 +43820,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -43740,7 +43851,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -44182,7 +44293,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -44190,18 +44301,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -44215,7 +44326,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -44246,7 +44357,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -44688,7 +44799,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -44696,18 +44807,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -44721,7 +44832,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -44752,7 +44863,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -45381,7 +45492,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 colSpan={4}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -45623,7 +45734,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 colSpan={4}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -45918,7 +46029,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -45926,18 +46037,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -45951,7 +46062,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                 >
                   <a
                     aria-label="diff.combined"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -45982,7 +46093,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt split"
@@ -46529,7 +46640,7 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="CHANGELOG.md"
           >
@@ -46537,18 +46648,18 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               CHANGELOG.md
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -46562,7 +46673,7 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -46593,7 +46704,7 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -46617,10 +46728,10 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -46842,10 +46953,10 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -46856,7 +46967,7 @@ exports[`Storyshots Diff SyntaxHighlighting (Markdown) 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -46892,7 +47003,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -46900,18 +47011,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -46925,7 +47036,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -46956,7 +47067,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -47473,7 +47584,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -47481,18 +47592,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -47506,7 +47617,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -47537,7 +47648,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -47738,7 +47849,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -48331,7 +48442,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -48339,18 +48450,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -48364,7 +48475,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -48395,7 +48506,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -48785,7 +48896,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -48793,18 +48904,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -48818,7 +48929,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -48849,7 +48960,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -49239,7 +49350,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -49247,18 +49358,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -49272,7 +49383,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -49303,7 +49414,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -49821,7 +49932,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -50035,7 +50146,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 colSpan={3}
               >
                 <hr
-                  className="DiffFile__HunkDivider-sc-10deuqx-4 eYYFTM"
+                  className="my-2"
                 />
               </td>
             </tr>
@@ -50300,7 +50411,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -50308,18 +50419,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -50333,7 +50444,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -50364,7 +50475,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -50838,7 +50949,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -50846,18 +50957,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -50871,7 +50982,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -50902,7 +51013,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -51415,10 +51526,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -51429,7 +51540,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -51456,7 +51567,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -51464,18 +51575,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -51489,7 +51600,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -51520,7 +51631,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -51544,10 +51655,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -51746,10 +51857,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -51771,10 +51882,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52370,10 +52481,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52384,7 +52495,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52411,7 +52522,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -52419,18 +52530,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -52444,7 +52555,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52475,7 +52586,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -52499,10 +52610,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52513,7 +52624,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52896,10 +53007,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52910,7 +53021,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -52937,7 +53048,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -52945,18 +53056,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -52970,7 +53081,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53001,7 +53112,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -53025,10 +53136,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53039,7 +53150,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53422,10 +53533,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53436,7 +53547,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53463,7 +53574,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -53471,18 +53582,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -53496,7 +53607,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -53527,7 +53638,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -53551,10 +53662,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54070,10 +54181,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54084,7 +54195,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54106,10 +54217,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54120,7 +54231,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54342,10 +54453,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54367,10 +54478,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54638,10 +54749,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54652,7 +54763,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54679,7 +54790,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
           className="level is-flex-wrap-wrap"
         >
           <div
-            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex has-cursor-pointer"
+            className="DiffFile__FullWidthTitleHeader-sc-10deuqx-1 ivlFSy level-left is-flex is-clickable"
             onClick={[Function]}
             title="Main.java"
           >
@@ -54687,18 +54798,18 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               className="fas fa-angle-down has-text-inherit"
             />
             <span
-              className="DiffFile__TitleWrapper-sc-10deuqx-2 hkxhAk is-ellipsis-overflow is-size-6"
+              className="is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
             </span>
             <span
-              className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal DiffFile__ChangeTypeTag-sc-10deuqx-5 cXFjDR has-text-weight-normal is-outlined is-rounded"
+              className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
               modify
             </span>
           </div>
           <div
-            className="DiffFile__AlignRight-sc-10deuqx-3 jAiOir level-right is-flex"
+            className="level-right is-flex ml-auto"
           >
             <div
               className="field is-grouped"
@@ -54712,7 +54823,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 >
                   <a
                     aria-label="diff.sideBySide"
-                    className="DiffButton__Button-sc-18d99hb-0 fmBRHm button"
+                    className="DiffButton__Button-sc-18d99hb-0 bGQXQi button is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -54743,7 +54854,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
         </div>
       </div>
       <div
-        className="panel-block is-paddingless"
+        className="panel-block p-0"
       >
         <table
           className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 kQPJnt unified"
@@ -55204,10 +55315,10 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 bsIgbR"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 kSCbay is-size-7 pl-5"
                 >
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -55218,7 +55329,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </span>
                    
                   <span
-                    className="HunkExpandLink__ExpandLink-whfbby-0 iBWSFV"
+                    className="is-clickable"
                     onClick={[Function]}
                   >
                     <i
@@ -55296,13 +55407,13 @@ exports[`Storyshots Duration Duration 1`] = `
 
 exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
 <div
-  className="AddKeyValueEntryToTableFieldstories__Spacing-d5xy2z-0 hDvOlV"
+  className="m-6"
 >
   <div
-    className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 kYncSL"
+    className="is-flex is-justify-content-space-between"
   >
     <fieldset
-      className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
+      className="field AddKeyValueEntryToTableField__FullWidthInputField-kiarql-0 eFAROt mr-5"
     >
       <label
         className="label"
@@ -55323,7 +55434,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
       </div>
     </fieldset>
     <fieldset
-      className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
+      className="field AddKeyValueEntryToTableField__FullWidthInputField-kiarql-0 eFAROt mr-5"
     >
       <label
         className="label"
@@ -55344,7 +55455,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
       </div>
     </fieldset>
     <button
-      className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 kygLQj"
+      className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-1 cPBcKY"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -55357,7 +55468,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
         />
       </span>
       <span>
-        Add to table
+        Add to Table
          
       </span>
     </button>
@@ -55367,13 +55478,13 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
 
 exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
 <div
-  className="AddKeyValueEntryToTableFieldstories__Spacing-d5xy2z-0 hDvOlV"
+  className="m-6"
 >
   <div
-    className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 kYncSL"
+    className="is-flex is-justify-content-space-between"
   >
     <fieldset
-      className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
+      className="field AddKeyValueEntryToTableField__FullWidthInputField-kiarql-0 eFAROt mr-5"
     >
       <label
         className="label"
@@ -55395,7 +55506,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
       </div>
     </fieldset>
     <fieldset
-      className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
+      className="field AddKeyValueEntryToTableField__FullWidthInputField-kiarql-0 eFAROt mr-5"
     >
       <label
         className="label"
@@ -55417,7 +55528,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
       </div>
     </fieldset>
     <button
-      className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 kygLQj"
+      className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-1 cPBcKY"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -55430,7 +55541,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
         />
       </span>
       <span>
-        Add to table
+        Add to Table
          
       </span>
     </button>
@@ -55733,7 +55844,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
          
         Classic helpText
         <span
-          className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+          className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
           data-tooltip="This is a classic help text."
         >
           <i
@@ -55762,7 +55873,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
          
         Long helpText
         <span
-          className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+          className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
           data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
         >
           <i
@@ -55896,7 +56007,7 @@ exports[`Storyshots Forms|FileInput Default 1`] = `
         Upload File
          
         <span
-          className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+          className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
           data-tooltip="Select your most loved file"
         >
           <i
@@ -56244,10 +56355,10 @@ exports[`Storyshots Forms|Radio Default 1`] = `
   className="Radiostories__Spacing-sc-18hvwhd-0 cAoTRX"
 >
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={false}
@@ -56260,10 +56371,10 @@ exports[`Storyshots Forms|Radio Default 1`] = `
     </label>
   </fieldset>
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={true}
@@ -56283,10 +56394,10 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
   className="Radiostories__Spacing-sc-18hvwhd-0 cAoTRX"
 >
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
       disabled={true}
     >
       <input
@@ -56306,10 +56417,10 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 exports[`Storyshots Forms|Radio Legacy Events 1`] = `
 Array [
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={false}
@@ -56336,10 +56447,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
     className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
   >
     <fieldset
-      className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+      className="is-inline-block"
     >
       <label
-        className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+        className="radio mr-2"
       >
         <input
           defaultChecked={true}
@@ -56354,10 +56465,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
       </label>
     </fieldset>
     <fieldset
-      className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+      className="is-inline-block"
     >
       <label
-        className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+        className="radio mr-2"
       >
         <input
           name="rememberMe"
@@ -56372,10 +56483,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
     </fieldset>
   </div>
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio ml-2"
+      className="radio mr-2 ml-2"
     >
       <input
         name="scramblePassword"
@@ -56389,10 +56500,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
     </label>
   </fieldset>
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
       disabled={true}
     >
       <input
@@ -56408,10 +56519,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
     </label>
   </fieldset>
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         name="readonly"
@@ -56443,10 +56554,10 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
 exports[`Storyshots Forms|Radio Ref 1`] = `
 Array [
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={false}
@@ -56474,10 +56585,10 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
   className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
 >
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={false}
@@ -56488,7 +56599,7 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
        
       Classic helpText
       <span
-        className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+        className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
         data-tooltip="This is a classic help text."
       >
         <i
@@ -56498,10 +56609,10 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
     </label>
   </fieldset>
   <fieldset
-    className="Radio__InlineFieldset-ays4vp-1 dwlqJP"
+    className="is-inline-block"
   >
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="radio mr-2"
     >
       <input
         checked={true}
@@ -56512,7 +56623,7 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
        
       Long helpText
       <span
-        className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+        className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
         data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
       >
         <i
@@ -57158,10 +57269,10 @@ Array [
 
 exports[`Storyshots GroupEntry Default 1`] = `
 <div
-  className="GroupEntrystories__Wrapper-sc-6ytotm-0 cFuNvv"
+  className="m-5"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -57169,32 +57280,32 @@ exports[`Storyshots GroupEntry Default 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <i
             className="fas fa-icons fa-2x fa-fw has-text-grey-light"
           />
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <strong
-              className="is-marginless"
+              className="m-0"
             >
               main content
             </strong>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             <small>
               more text
@@ -57203,7 +57314,7 @@ exports[`Storyshots GroupEntry Default 1`] = `
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
           className="field is-grouped"
@@ -57235,10 +57346,10 @@ exports[`Storyshots GroupEntry Default 1`] = `
 
 exports[`Storyshots GroupEntry With long texts 1`] = `
 <div
-  className="GroupEntrystories__Wrapper-sc-6ytotm-0 cFuNvv"
+  className="m-5"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -57246,32 +57357,32 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <i
             className="fas fa-icons fa-2x fa-fw has-text-grey-light"
           />
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <strong
-              className="is-marginless"
+              className="m-0"
             >
               Very-important-repository-with-a-particular-long-but-easily-rememberable-name-which-also-is-written-in-kebab-case
             </strong>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             <small>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -57280,7 +57391,7 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
           className="field is-grouped"
@@ -57312,10 +57423,10 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
 
 exports[`Storyshots Help Default 1`] = `
 <div
-  className="Helpstories__Wrapper-yq79zu-0 bZhLbP"
+  className="m-6"
 >
   <span
-    className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+    className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
     data-tooltip="This is a help message"
   >
     <i
@@ -57327,16 +57438,16 @@ exports[`Storyshots Help Default 1`] = `
 
 exports[`Storyshots Help Multiline 1`] = `
 <div
-  className="Helpstories__Wrapper-yq79zu-0 bZhLbP"
+  className="m-6"
 >
   <div
-    className="Helpstories__Spacing-yq79zu-1 epnKRG"
+    className="mt-4"
   >
     <label>
       With multiline (default):
     </label>
     <span
-      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+      className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1 has-tooltip-multiline"
       data-tooltip="Cleverness nuclear genuine static irresponsibility invited President Zaphod
 Beeblebrox hyperspace ship. Another custard through computer-generated universe
 shapes field strong disaster parties Russell’s ancestors infinite colour
@@ -57348,13 +57459,13 @@ imaginative generator sweep."
     </span>
   </div>
   <div
-    className="Helpstories__Spacing-yq79zu-1 epnKRG"
+    className="mt-4"
   >
     <label>
       Without multiline:
     </label>
     <span
-      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block"
+      className="tooltip has-tooltip-right Help__AbsolutePositionTooltip-ykmmew-0 fpvHMo is-inline-block pl-1"
       data-tooltip="Cleverness nuclear genuine static irresponsibility invited President Zaphod
 Beeblebrox hyperspace ship. Another custard through computer-generated universe
 shapes field strong disaster parties Russell’s ancestors infinite colour
@@ -57544,7 +57655,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-user-circle fa-fw"
@@ -57554,7 +57665,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           Trillian McMillian
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57572,7 +57683,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -57582,7 +57693,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           footer.information.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57600,7 +57711,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -57610,7 +57721,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           footer.support.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57653,7 +57764,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <div
             data-testid="trillian-mcmillian"
@@ -57671,7 +57782,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           </div>
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57698,7 +57809,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -57708,7 +57819,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           footer.information.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57746,7 +57857,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -57756,7 +57867,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           footer.support.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57809,7 +57920,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <div
             data-testid="trillian-mcmillian"
@@ -57827,7 +57938,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           </div>
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57845,7 +57956,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -57855,7 +57966,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           footer.information.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57873,7 +57984,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -57883,7 +57994,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           footer.support.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57926,7 +58037,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-user-circle fa-fw"
@@ -57936,7 +58047,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           Trillian McMillian
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -57963,7 +58074,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -57973,7 +58084,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           footer.information.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -58011,7 +58122,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="FooterSection__Title-lx0ikb-0 iOApEf"
+          className="has-text-weight-bold mb-2"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -58021,7 +58132,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           footer.support.title
         </div>
         <ul
-          className="FooterSection__Menu-lx0ikb-1 bUuyMJ"
+          className="FooterSection__Menu-lx0ikb-0 dbumNU"
         >
           <li>
             <a
@@ -58063,11 +58174,11 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
 exports[`Storyshots Loading Default 1`] = `
 <div>
   <div
-    className="Loading__Wrapper-sc-1usnmho-0 eEhhMe is-flex"
+    className="Loading__Wrapper-sc-1usnmho-0 bHZGQa is-flex is-flex-direction-column is-justify-content-center is-align-items-center"
   >
     <img
       alt="loading.alt"
-      className="Loading__FixedSizedImage-sc-1usnmho-1 cVKREa"
+      className="Loading__FixedSizedImage-sc-1usnmho-1 ekDGHF mb-3"
       src="/images/loading.svg"
     />
     <p
@@ -72267,7 +72378,7 @@ exports[`Storyshots Navigation|Secondary Active when match 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label has-cursor-pointer"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label is-clickable"
           onClick={[Function]}
         >
           <i
@@ -72329,7 +72440,7 @@ exports[`Storyshots Navigation|Secondary Default 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label has-cursor-pointer"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label is-clickable"
           onClick={[Function]}
         >
           <i
@@ -72391,7 +72502,7 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label has-cursor-pointer"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label is-clickable"
           onClick={[Function]}
         >
           <i
@@ -72479,7 +72590,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label has-cursor-pointer"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fCZGGb menu-label is-clickable"
           onClick={[Function]}
         >
           <i
@@ -72665,7 +72776,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -72673,13 +72784,13 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -72691,32 +72802,32 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 >
                   <span
                     className="tooltip has-tooltip-right"
                     data-tooltip="archive.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                      className="tag is-light is-small p-1 is-size-7 has-text-weight-bold"
                     >
                       repository.archived
                     </span>
@@ -72726,29 +72837,29 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -72769,7 +72880,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -72777,13 +72888,13 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -72795,53 +72906,53 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 />
               </span>
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -72862,7 +72973,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -72870,13 +72981,13 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -72888,10 +72999,10 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
@@ -72900,44 +73011,44 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
                 className="far fa-star"
               />
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 />
               </span>
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -72958,7 +73069,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -72966,13 +73077,13 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -72984,53 +73095,53 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 />
               </span>
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73051,7 +73162,7 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -73059,13 +73170,13 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -73077,32 +73188,32 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 >
                   <span
                     className="tooltip has-tooltip-right"
                     data-tooltip="exporting.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                      className="tag is-light is-small p-1 is-size-7 has-text-weight-bold"
                     >
                       repository.exporting
                     </span>
@@ -73112,29 +73223,29 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73155,7 +73266,7 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -73163,13 +73274,13 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -73181,32 +73292,32 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 >
                   <span
                     className="tooltip has-tooltip-right"
                     data-tooltip="healthCheckFailure.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
+                      className="tag is-danger is-small is-clickable p-1 is-size-7 has-text-weight-bold"
                       onClick={[Function]}
                     >
                       repository.healthCheckFailure
@@ -73217,29 +73328,29 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73260,7 +73371,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -73268,13 +73379,13 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -73286,32 +73397,32 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 >
                   <span
                     className="tooltip has-tooltip-right"
                     data-tooltip="archive.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                      className="tag is-light is-small p-1 is-size-7 has-text-weight-bold"
                     >
                       repository.archived
                     </span>
@@ -73321,7 +73432,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
                     data-tooltip="exporting.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                      className="tag is-light is-small p-1 is-size-7 has-text-weight-bold"
                     >
                       repository.exporting
                     </span>
@@ -73331,29 +73442,29 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73374,7 +73485,7 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -73382,13 +73493,13 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -73400,32 +73511,32 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 heartOfGold
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 >
                   <span
                     className="tooltip has-tooltip-right"
                     data-tooltip="healthCheckFailure.tooltip"
                   >
                     <span
-                      className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
+                      className="tag is-danger is-small is-clickable p-1 is-size-7 has-text-weight-bold"
                       onClick={[Function]}
                     >
                       repository.healthCheckFailure
@@ -73436,29 +73547,29 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73479,7 +73590,7 @@ exports[`Storyshots RepositoryEntry With long texts 1`] = `
   className="RepositoryEntrystories__Spacing-toppdg-0 gZhLog"
 >
   <div
-    className="GroupEntry__Wrapper-sc-1f902yu-8 bXFjdM"
+    className="is-relative"
   >
     <a
       className="GroupEntry__OverlayLink-sc-1f902yu-1 RhDcq"
@@ -73487,13 +73598,13 @@ exports[`Storyshots RepositoryEntry With long texts 1`] = `
       onClick={[Function]}
     />
     <div
-      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 chNVTL"
+      className="GroupEntry__StyledGroupEntry-sc-1f902yu-0 pJvZK is-flex is-justify-content-space-between is-align-items-center p-2"
     >
       <div
-        className="GroupEntry__ContentLeft-sc-1f902yu-5 zDFrx"
+        className="GroupEntry__ContentLeft-sc-1f902yu-4 fIVVkl is-flex is-flex-grow-1 is-align-items-center"
       >
         <div
-          className="GroupEntry__Avatar-sc-1f902yu-2 jgyqDs"
+          className="GroupEntry__Avatar-sc-1f902yu-2 iFzhlu mr-4"
         >
           <div
             className="RepositoryAvatar__Avatar-uh53vb-0 iYRgUJ image is-48x48"
@@ -73505,53 +73616,53 @@ exports[`Storyshots RepositoryEntry With long texts 1`] = `
           </div>
         </div>
         <div
-          className="GroupEntry__NameDescriptionWrapper-sc-1f902yu-7 kOXkAw"
+          className="is-flex-grow-1 is-clipped"
         >
           <div
-            className="GroupEntry__Name-sc-1f902yu-3 dxTSzo"
+            className="mx-1"
           >
             <div
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
+                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
               >
                 veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame
               </strong>
                
               <span
-                className="RepositoryFlags__Wrapper-sc-1swhx1t-0 iZwVwy"
+                className="is-flex is-align-items-center is-hidden-mobile"
               >
                 <div
-                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-1 dkzelp"
+                  className="RepositoryFlags__RepositoryFlagContainer-sc-1swhx1t-0 fDXIgs"
                 />
               </span>
             </div>
           </div>
           <p
-            className="GroupEntry__Description-sc-1f902yu-4 bPviuZ"
+            className="GroupEntry__Description-sc-1f902yu-3 cSXCHt mx-1"
           >
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
           </p>
         </div>
       </div>
       <div
-        className="GroupEntry__ContentRight-sc-1f902yu-6 euVvLR is-hidden-touch"
+        className="GroupEntry__ContentRight-sc-1f902yu-5 joMVND is-hidden-touch is-flex is-flex-shrink-0 is-justify-content-flex-end pl-5"
       >
         <div
-          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 hpwSFW"
+          className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="RepositoryEntry__QuickActionbar-sc-6jys82-2 bbVvmm"
+            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
           >
             <i
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-3 jNjBgB has-cursor-pointer"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
               onClick={[Function]}
               title="overview.clone"
             />
           </span>
           <small
-            className="RepositoryEntry__DateWrapper-sc-6jys82-1 jWsUcR"
+            className="pb-1"
           >
             <time
               className="DateElement-sc-1schp8c-0 cinWxa"
@@ -73570,7 +73681,7 @@ exports[`Storyshots RepositoryEntry With long texts 1`] = `
 exports[`Storyshots SplitAndReplace Simple replacement 1`] = `
 Array [
   <div
-    className="SplitAndReplacestories__Wrapper-sc-1bo2tpl-0 ciQXdW"
+    className="m-6"
   >
     <i
       className="fas fa-quote-left has-text-grey-light"
@@ -73595,7 +73706,7 @@ Array [
     />
   </div>,
   <div
-    className="SplitAndReplacestories__Wrapper-sc-1bo2tpl-0 ciQXdW"
+    className="m-6"
   >
     <i
       className="fas fa-quote-left has-text-grey-light"
@@ -87846,14 +87957,14 @@ exports[`Storyshots Table|Table Default 1`] = `
         First Name
       </th>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Last Name
         <i
-          className="fas fa-sort-amount-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-amount-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
       <th
@@ -87931,25 +88042,25 @@ exports[`Storyshots Table|Table Table with Word-Break 1`] = `
   <thead>
     <tr>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Id
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Name
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
     </tr>
@@ -87982,36 +88093,36 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
   <thead>
     <tr>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Id
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Name
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
       <th
-        className="has-cursor-pointer"
+        className="is-clickable"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
         Description
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 pKGzJ"
+          className="fas fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
         />
       </th>
     </tr>
@@ -88059,7 +88170,7 @@ exports[`Storyshots Tag Clickable 1`] = `
   className="Tagstories__Wrapper-wsn8kx-0 biUGWd"
 >
   <span
-    className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal has-cursor-pointer"
+    className="tag is-light is-normal is-clickable"
     onClick={[Function]}
   >
     Click here
@@ -88076,7 +88187,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-black is-normal"
+        className="tag is-black is-normal"
       >
         black
       </span>
@@ -88085,7 +88196,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-dark is-normal"
+        className="tag is-dark is-normal"
       >
         dark
       </span>
@@ -88094,7 +88205,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal"
+        className="tag is-light is-normal"
       >
         light
       </span>
@@ -88103,7 +88214,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-white is-normal"
+        className="tag is-white is-normal"
       >
         white
       </span>
@@ -88112,7 +88223,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-primary is-normal"
+        className="tag is-primary is-normal"
       >
         primary
       </span>
@@ -88121,7 +88232,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-link is-normal"
+        className="tag is-link is-normal"
       >
         link
       </span>
@@ -88130,7 +88241,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-info is-normal"
+        className="tag is-info is-normal"
       >
         info
       </span>
@@ -88139,7 +88250,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-success is-normal"
+        className="tag is-success is-normal"
       >
         success
       </span>
@@ -88148,7 +88259,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-warning is-normal"
+        className="tag is-warning is-normal"
       >
         warning
       </span>
@@ -88157,7 +88268,7 @@ exports[`Storyshots Tag Colors 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-danger is-normal"
+        className="tag is-danger is-normal"
       >
         danger
       </span>
@@ -88171,7 +88282,7 @@ exports[`Storyshots Tag Default 1`] = `
   className="Tagstories__Wrapper-wsn8kx-0 biUGWd"
 >
   <span
-    className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal"
+    className="tag is-light is-normal"
   >
     Default tag
   </span>
@@ -88187,7 +88298,7 @@ exports[`Storyshots Tag Outlined 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-success is-normal is-outlined"
+        className="tag is-success is-normal is-outlined"
       >
         success
       </span>
@@ -88196,7 +88307,7 @@ exports[`Storyshots Tag Outlined 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-black is-normal is-outlined"
+        className="tag is-black is-normal is-outlined"
       >
         black
       </span>
@@ -88205,7 +88316,7 @@ exports[`Storyshots Tag Outlined 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-danger is-normal is-outlined"
+        className="tag is-danger is-normal is-outlined"
       >
         danger
       </span>
@@ -88219,7 +88330,7 @@ exports[`Storyshots Tag Rounded 1`] = `
   className="Tagstories__Wrapper-wsn8kx-0 biUGWd"
 >
   <span
-    className="Tag__InnerTag-ql67az-0 hGiieq tag is-dark is-normal is-rounded"
+    className="tag is-dark is-normal is-rounded"
   >
     Rounded tag
   </span>
@@ -88235,7 +88346,7 @@ exports[`Storyshots Tag Sizes 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+        className="tag is-light is-small p-1 is-size-7 has-text-weight-bold"
       >
         small
       </span>
@@ -88244,7 +88355,7 @@ exports[`Storyshots Tag Sizes 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal"
+        className="tag is-light is-normal"
       >
         normal
       </span>
@@ -88253,7 +88364,7 @@ exports[`Storyshots Tag Sizes 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-medium"
+        className="tag is-light is-medium"
       >
         medium
       </span>
@@ -88262,7 +88373,7 @@ exports[`Storyshots Tag Sizes 1`] = `
       className="Tagstories__Spacing-wsn8kx-1 eufxAm"
     >
       <span
-        className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-large"
+        className="tag is-light is-large"
       >
         large
       </span>
@@ -88276,7 +88387,7 @@ exports[`Storyshots Tag With Icon 1`] = `
   className="Tagstories__Wrapper-wsn8kx-0 biUGWd"
 >
   <span
-    className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal"
+    className="tag is-light is-normal"
   >
     <i
       className="fas fa-bolt"
@@ -88292,7 +88403,7 @@ exports[`Storyshots Tag With title 1`] = `
   className="Tagstories__Wrapper-wsn8kx-0 biUGWd"
 >
   <span
-    className="Tag__InnerTag-ql67az-0 hGiieq tag is-light is-normal"
+    className="tag is-light is-normal"
     title="good job"
   >
     hover me
diff --git a/scm-ui/ui-components/src/buttons/CreateButton.tsx b/scm-ui/ui-components/src/buttons/CreateButton.tsx
index dcf0f64553..a46cb3dee5 100644
--- a/scm-ui/ui-components/src/buttons/CreateButton.tsx
+++ b/scm-ui/ui-components/src/buttons/CreateButton.tsx
@@ -24,17 +24,16 @@
 import React from "react";
 import styled from "styled-components";
 import Button, { ButtonProps } from "./Button";
+import classNames from "classnames";
 
 const Wrapper = styled.div`
-  margin-top: 2em;
-  padding: 1em 1em;
   border: 2px solid #e9f7fd;
 `;
 
 export default class CreateButton extends React.Component<ButtonProps> {
   render() {
     return (
-      <Wrapper className="has-text-centered">
+      <Wrapper className={classNames("has-text-centered", "mt-5", "p-4")}>
         <Button color="primary" {...this.props} />
       </Wrapper>
     );
diff --git a/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
index 55f5be0d93..b889152270 100644
--- a/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AddEntryToTableField.tsx
@@ -37,20 +37,8 @@ type Props = {
   errorMessage: string;
 };
 
-const StyledLevel = styled(Level)`
-  align-items: stretch;
-  margin-bottom: 1rem !important; // same margin as field
-`;
-
 const FullWidthInputField = styled(InputField)`
   width: 100%;
-  margin-right: 1.5rem;
-`;
-
-const StyledField = styled.div.attrs(() => ({
-  className: "field"
-}))`
-  align-self: flex-end;
 `;
 
 const AddEntryToTableField: FC<Props> = ({
@@ -60,7 +48,7 @@ const AddEntryToTableField: FC<Props> = ({
   fieldLabel,
   helpText,
   validateEntry,
-  errorMessage
+  errorMessage,
 }) => {
   const [entryToAdd, setEntryToAdd] = useState("");
 
@@ -89,9 +77,11 @@ const AddEntryToTableField: FC<Props> = ({
   };
 
   return (
-    <StyledLevel
+    <Level
+      className="is-align-items-stretch mb-4"
       children={
         <FullWidthInputField
+          className="mr-5"
           label={fieldLabel}
           errorMessage={errorMessage}
           onChange={handleAddEntryChange}
@@ -103,13 +93,13 @@ const AddEntryToTableField: FC<Props> = ({
         />
       }
       right={
-        <StyledField>
+        <div className="field is-align-self-flex-end">
           <AddButton
             label={buttonLabel}
             action={addButtonClicked}
             disabled={disabled || entryToAdd === "" || !isValid()}
           />
-        </StyledField>
+        </div>
       }
     />
   );
diff --git a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx
index c560b6d8f5..7b68bb587f 100644
--- a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx
+++ b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx
@@ -21,37 +21,31 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import styled from "styled-components";
-import { storiesOf } from "@storybook/react";
 import React from "react";
-import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 import { MemoryRouter } from "react-router-dom";
-
-const Spacing = styled.div`
-  padding: 2em;
-`;
+import { storiesOf } from "@storybook/react";
+import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 
 storiesOf("Forms|AddKeyValueEntryToTableField", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
-    <Spacing>
+    <div className="m-6">
       <AddKeyValueEntryToTableField
         keyFieldLabel="Key"
         valueFieldLabel="Value"
-        buttonLabel="Add to table"
-        addEntry={(key, value) => {console.log(key, value)}}
+        buttonLabel="Add to Table"
+        addEntry={() => null}
       />
-    </Spacing>
+    </div>
   ))
   .add("Disabled", () => (
-    <Spacing>
+    <div className="m-6">
       <AddKeyValueEntryToTableField
         keyFieldLabel="Key"
         valueFieldLabel="Value"
-        buttonLabel="Add to table"
-        addEntry={() => {}}
+        buttonLabel="Add to Table"
+        addEntry={() => null}
         disabled={true}
       />
-    </Spacing>
+    </div>
   ));
diff --git a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
index 9c30f2ab49..240a4a0750 100644
--- a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, useState } from "react";
 import styled from "styled-components";
 import InputField from "./InputField";
@@ -39,13 +38,7 @@ type Props = {
   validateEntry?: (p: string) => boolean;
 };
 
-const InputLevel = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledInputField = styled(InputField)`
-  margin-right: 1.5rem;
+const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
@@ -62,7 +55,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry
+  addEntry,
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
@@ -77,13 +70,14 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
 
   const add = () => {
     addEntry(key, value);
-    setKey("")
+    setKey("");
     setValue("");
-  }
+  };
 
   return (
-    <InputLevel>
-      <StyledInputField
+    <div className="is-flex is-justify-content-space-between">
+      <FullWidthInputField
+        className="mr-5"
         label={keyFieldLabel}
         errorMessage={errorMessage}
         onChange={setKey}
@@ -93,7 +87,8 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         disabled={disabled}
         helpText={keyHelpText}
       />
-      <StyledInputField
+      <FullWidthInputField
+        className="mr-5"
         label={valueFieldLabel}
         errorMessage={errorMessage}
         onChange={setValue}
@@ -108,7 +103,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         action={add}
         disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
       />
-    </InputLevel>
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
index 48666dc0a5..12a4e3879c 100644
--- a/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
+++ b/scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx
@@ -42,7 +42,6 @@ type Props = {
 
 const FullWidthAutocomplete = styled(Autocomplete)`
   width: 100%;
-  margin-right: 1.5rem;
 `;
 
 const AutocompleteAddEntryToTableField: FC<Props> = ({
@@ -79,6 +78,7 @@ const AutocompleteAddEntryToTableField: FC<Props> = ({
     <Level
       children={
         <FullWidthAutocomplete
+          className="mr-5"
           label={fieldLabel}
           loadSuggestions={loadSuggestions}
           valueSelected={handleAddEntryChange}
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index 1ce80ca989..37df0eb701 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -22,18 +22,9 @@
  * SOFTWARE.
  */
 import React, { ChangeEvent, FC, FocusEvent } from "react";
-import { Help } from "../index";
-import styled from "styled-components";
-import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 import classNames from "classnames";
-
-const StyledRadio = styled.label`
-  margin-right: 0.5em;
-`;
-
-const InlineFieldset = styled.fieldset`
-  display: inline-block;
-`;
+import { Help } from "../index";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 
 type BaseProps = {
   label?: string;
@@ -47,7 +38,12 @@ type BaseProps = {
   readOnly?: boolean;
 };
 
-const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, readOnly, ...props }) => {
+const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
+  name,
+  defaultChecked,
+  readOnly,
+  ...props
+}) => {
   const renderHelp = () => {
     const helpText = props.helpText;
     if (helpText) {
@@ -76,13 +72,13 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
   };
 
   return (
-    <InlineFieldset disabled={readOnly}>
+    <fieldset className="is-inline-block" disabled={readOnly}>
       {/*
         we have to ignore the next line,
         because jsx label does not the custom disabled attribute
         but bulma does.
         // @ts-ignore */}
-      <StyledRadio className={classNames("radio", props.className)} disabled={props.disabled}>
+      <label className={classNames("radio", "mr-2", props.className)} disabled={props.disabled}>
         <input
           type="radio"
           name={name}
@@ -96,8 +92,8 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
         />{" "}
         {props.label}
         {renderHelp()}
-      </StyledRadio>
-    </InlineFieldset>
+      </label>
+    </fieldset>
   );
 };
 
diff --git a/scm-ui/ui-components/src/layout/FooterSection.tsx b/scm-ui/ui-components/src/layout/FooterSection.tsx
index d6f564b299..1edc7389e7 100644
--- a/scm-ui/ui-components/src/layout/FooterSection.tsx
+++ b/scm-ui/ui-components/src/layout/FooterSection.tsx
@@ -22,25 +22,21 @@
  * SOFTWARE.
  */
 import React, { FC, ReactNode } from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
 type Props = {
   title: ReactNode;
 };
 
-const Title = styled.div`
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-`;
-
 const Menu = styled.ul`
   padding-left: 1.1rem;
 `;
 
 const FooterSection: FC<Props> = ({ title, children }) => {
   return (
-    <section className="column is-one-third">
-      <Title>{title}</Title>
+    <section className={classNames("column", "is-one-third")}>
+      <div className={classNames("has-text-weight-bold", "mb-2")}>{title}</div>
       <Menu>{children}</Menu>
     </section>
   );
diff --git a/scm-ui/ui-components/src/layout/GroupEntries.tsx b/scm-ui/ui-components/src/layout/GroupEntries.tsx
index 71c6895c67..14523f3e87 100644
--- a/scm-ui/ui-components/src/layout/GroupEntries.tsx
+++ b/scm-ui/ui-components/src/layout/GroupEntries.tsx
@@ -21,25 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, ReactNode } from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0.75rem;
-  font-size: 1rem;
-  font-weight: bold;
-`;
-
 const Separator = styled.div`
   border-bottom: 1px solid rgb(219, 219, 219, 0.5);
-  margin: 0 1rem;
-`;
-
-const Box = styled.div`
-  padding: 0.5rem;
 `;
 
 type Props = {
@@ -51,14 +38,16 @@ const GroupEntries: FC<Props> = ({ namespaceHeader, elements }) => {
   const content = elements.map((entry, index) => (
     <React.Fragment key={index}>
       <div>{entry}</div>
-      {index + 1 !== elements.length ? <Separator /> : null}
+      {index + 1 !== elements.length ? <Separator className="mx-4" /> : null}
     </React.Fragment>
   ));
 
   return (
     <>
-      <TitleWrapper>{namespaceHeader}</TitleWrapper>
-      <Box className="box">{content}</Box>
+      <div className={classNames("is-flex", "is-align-items-center", "is-size-6", "has-text-weight-bold", "p-3")}>
+        {namespaceHeader}
+      </div>
+      <div className={classNames("box", "p-2")}>{content}</div>
       <div className="is-clearfix" />
     </>
   );
diff --git a/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx b/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx
index cd69fb4b77..63bcbafe1b 100644
--- a/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx
+++ b/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx
@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import styled from "styled-components";
 import Icon from "../Icon";
 import { storiesOf } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
@@ -31,16 +30,12 @@ import GroupEntry from "./GroupEntry";
 import { Button, ButtonGroup } from "../buttons";
 import copyToClipboard from "../CopyToClipboard";
 
-const Wrapper = styled.div`
-  margin: 2rem;
-`;
-
 const link = "/foo/bar";
 const icon = <Icon name="icons fa-2x fa-fw" />;
-const name = <strong className="is-marginless">main content</strong>;
+const name = <strong className="m-0">main content</strong>;
 const description = <small>more text</small>;
 const longName = (
-  <strong className="is-marginless">
+  <strong className="m-0">
     Very-important-repository-with-a-particular-long-but-easily-rememberable-name-which-also-is-written-in-kebab-case
   </strong>
 );
@@ -56,7 +51,7 @@ const contentRight = (
 
 storiesOf("GroupEntry", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <div className="m-5">{storyFn()}</div>)
   .add("Default", () => (
     <GroupEntry link={link} avatar={icon} name={name} description={description} contentRight={contentRight} />
   ))
diff --git a/scm-ui/ui-components/src/layout/GroupEntry.tsx b/scm-ui/ui-components/src/layout/GroupEntry.tsx
index edcbab1823..42108fb794 100644
--- a/scm-ui/ui-components/src/layout/GroupEntry.tsx
+++ b/scm-ui/ui-components/src/layout/GroupEntry.tsx
@@ -21,18 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, ReactNode } from "react";
 import { Link } from "react-router-dom";
+import classNames from "classnames";
 import styled from "styled-components";
 
 const StyledGroupEntry = styled.div`
   max-height: calc(90px - 1.5rem);
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5rem;
-  align-items: center;
   pointer-events: all;
 `;
 
@@ -49,7 +45,6 @@ const OverlayLink = styled(Link)`
 `;
 
 const Avatar = styled.div`
-  padding-right: 1rem;
   .predefined-avatar {
     height: 48px;
     width: 48px;
@@ -57,12 +52,7 @@ const Avatar = styled.div`
   }
 `;
 
-const Name = styled.div`
-  padding: 0 0.25rem;
-`;
-
 const Description = styled.p`
-  padding: 0 0.25rem;
   height: 1.5rem;
   text-overflow: ellipsis;
   overflow-x: hidden;
@@ -72,30 +62,14 @@ const Description = styled.p`
 `;
 
 const ContentLeft = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
   min-width: 0;
 `;
 
 const ContentRight = styled.div`
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: flex-end;
   pointer-events: all;
-  padding-left: 2rem;
   margin-bottom: -10px;
 `;
 
-const NameDescriptionWrapper = styled.div`
-  overflow: hidden;
-  flex: 1 1 auto;
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-`;
-
 type Props = {
   title?: string;
   avatar: string | ReactNode;
@@ -107,19 +81,32 @@ type Props = {
 
 const GroupEntry: FC<Props> = ({ link, avatar, title, name, description, contentRight }) => {
   return (
-    <Wrapper>
+    <div className="is-relative">
       <OverlayLink to={link} />
-      <StyledGroupEntry title={title}>
-        <ContentLeft>
-          <Avatar>{avatar}</Avatar>
-          <NameDescriptionWrapper>
-            <Name>{name}</Name>
-            <Description>{description}</Description>
-          </NameDescriptionWrapper>
+      <StyledGroupEntry
+        className={classNames("is-flex", "is-justify-content-space-between", "is-align-items-center", "p-2")}
+        title={title}
+      >
+        <ContentLeft className={classNames("is-flex", "is-flex-grow-1", "is-align-items-center")}>
+          <Avatar className="mr-4">{avatar}</Avatar>
+          <div className={classNames("is-flex-grow-1", "is-clipped")}>
+            <div className="mx-1">{name}</div>
+            <Description className="mx-1">{description}</Description>
+          </div>
         </ContentLeft>
-        <ContentRight className="is-hidden-touch">{contentRight}</ContentRight>
+        <ContentRight
+          className={classNames(
+            "is-hidden-touch",
+            "is-flex",
+            "is-flex-shrink-0",
+            "is-justify-content-flex-end",
+            "pl-5"
+          )}
+        >
+          {contentRight}
+        </ContentRight>
       </StyledGroupEntry>
-    </Wrapper>
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-components/src/layout/Page.tsx b/scm-ui/ui-components/src/layout/Page.tsx
index 74b3c63caf..82a5005e8f 100644
--- a/scm-ui/ui-components/src/layout/Page.tsx
+++ b/scm-ui/ui-components/src/layout/Page.tsx
@@ -45,22 +45,14 @@ type Props = {
 };
 
 const PageActionContainer = styled.div`
-  justify-content: flex-end;
-  align-items: center;
-
   // every child except first
   > * ~ * {
     margin-left: 1.25rem;
   }
 `;
 
-const MarginLeft = styled.div`
-  margin-left: 0.5rem;
-`;
-
-const FlexContainer = styled.div`
-  display: flex;
-  flex-direction: row;
+const MaxTitleHeight = styled.div`
+  // remove blank space in repo create form
   height: 2.25rem;
 `;
 
@@ -98,12 +90,19 @@ export default class Page extends React.Component<Props> {
 
     let pageActions = null;
     let pageActionsExists = false;
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child && !error) {
         if (this.isPageAction(child)) {
           pageActions = (
             <PageActionContainer
-              className={classNames("column", "is-three-fifths", "is-mobile-action-spacing", "is-flex-tablet")}
+              className={classNames(
+                "column",
+                "is-three-fifths",
+                "is-mobile-action-spacing",
+                "is-flex-tablet",
+                "is-justify-content-flex-end",
+                "is-align-items-center"
+              )}
             >
               {child}
             </PageActionContainer>
@@ -119,10 +118,10 @@ export default class Page extends React.Component<Props> {
         <>
           <div className="columns">
             <div className="column">
-              <FlexContainer>
+              <MaxTitleHeight className="is-flex">
                 <Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
-                {afterTitle && <MarginLeft>{afterTitle}</MarginLeft>}
-              </FlexContainer>
+                {afterTitle && <div className="ml-2">{afterTitle}</div>}
+              </MaxTitleHeight>
               {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
             </div>
             {pageActions}
@@ -145,7 +144,7 @@ export default class Page extends React.Component<Props> {
     }
 
     const content: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
         if (!this.isPageAction(child)) {
           content.push(child);
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index b9985201e7..ff14088aaa 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -76,7 +76,7 @@ export const Modal: FC<Props> = ({
       <div className="modal-background" onClick={closeFunction} />
       <SizedModal className="modal-card" size={size}>
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
-          <p className={`modal-card-title is-marginless has-text-${headTextColor}`}>{title}</p>
+          <p className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</p>
           <button className="delete" aria-label="close" onClick={closeFunction} />
         </header>
         <section className="modal-card-body">{body}</section>
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index e013a82bc2..5cf482e355 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -82,7 +82,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
     <SectionContainer className="menu">
       <div>
         <MenuLabel
-          className={classNames("menu-label", { "has-cursor-pointer": collapsible })}
+          className={classNames("menu-label", { "is-clickable": collapsible })}
           collapsed={isCollapsed}
           onClick={toggleCollapseState}
         >
diff --git a/scm-ui/ui-components/src/popover/Popover.tsx b/scm-ui/ui-components/src/popover/Popover.tsx
index 797d9aef53..53451ced9e 100644
--- a/scm-ui/ui-components/src/popover/Popover.tsx
+++ b/scm-ui/ui-components/src/popover/Popover.tsx
@@ -43,7 +43,7 @@ type ContainerProps = {
 const PopoverContainer = styled.div<ContainerProps>`
   position: absolute;
   z-index: 100;
-  width: ${props => props.width}px;
+  width: ${(props) => props.width}px;
   display: block;
 
   &:before {
@@ -54,7 +54,7 @@ const PopoverContainer = styled.div<ContainerProps>`
     height: 0;
     width: 0;
     top: 100%;
-    left: ${props => props.width / 2}px;
+    left: ${(props) => props.width / 2}px;
     border-color: transparent;
     border-bottom-color: white;
     border-left-color: white;
@@ -67,15 +67,11 @@ const PopoverContainer = styled.div<ContainerProps>`
   }
 `;
 
-const SmallHr = styled.hr`
-  margin: 0.5em 0;
-`;
-
 const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = props => {
+const Popover: FC<Props> = (props) => {
   if (!props.show) {
     return null;
   }
@@ -93,13 +89,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover"
+      type: "enter-popover",
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover"
+      type: "leave-popover",
     });
   };
 
@@ -109,20 +105,20 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
     <PopoverContainer
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={"box"}
+      className="box"
       style={{ top: `${top}px`, left: `${left}px` }}
       width={width!}
       ref={ref}
     >
       <PopoverHeading>{title}</PopoverHeading>
-      <SmallHr />
+      <hr className="my-2" />
       {children}
     </PopoverContainer>
   );
 };
 
 Popover.defaultProps = {
-  width: 120
+  width: 120,
 };
 
 export default Popover;
diff --git a/scm-ui/ui-components/src/repos/DiffButton.tsx b/scm-ui/ui-components/src/repos/DiffButton.tsx
index 3e9153c2c2..877fcf9ebc 100644
--- a/scm-ui/ui-components/src/repos/DiffButton.tsx
+++ b/scm-ui/ui-components/src/repos/DiffButton.tsx
@@ -27,7 +27,6 @@ import Tooltip from "../Tooltip";
 
 const Button = styled.a`
   width: 50px;
-  cursor: pointer;
   &:hover {
     color: #33b2e8;
   }
@@ -47,7 +46,7 @@ const DiffButton: FC<Props> = ({ icon, tooltip, onClick }) => {
 
   return (
     <Tooltip message={tooltip} location="top">
-      <Button aria-label={tooltip} className="button" onClick={handleClick}>
+      <Button aria-label={tooltip} className="button is-clickable" onClick={handleClick}>
         <i className={`fas fa-${icon}`} />
       </Button>
     </Tooltip>
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 21b1cde77e..eb1a4d48fa 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -69,22 +69,6 @@ const FullWidthTitleHeader = styled.div`
   max-width: 100%;
 `;
 
-const TitleWrapper = styled.span`
-  margin-left: 0.25rem;
-`;
-
-const AlignRight = styled.div`
-  margin-left: auto;
-`;
-
-const HunkDivider = styled.hr`
-  margin: 0.5rem 0;
-`;
-
-const ChangeTypeTag = styled(Tag)`
-  margin-left: 0.75rem;
-`;
-
 const MarginlessModalContent = styled.div`
   margin: -1.25rem;
 
@@ -319,7 +303,7 @@ class DiffFile extends React.Component<Props, State> {
     } else if (i > 0) {
       items.push(
         <Decoration>
-          <HunkDivider />
+          <hr className="my-2" />
         </Decoration>
       );
     }
@@ -403,8 +387,8 @@ class DiffFile extends React.Component<Props, State> {
 
     const color = value === "added" ? "success" : value === "deleted" ? "danger" : "info";
     return (
-      <ChangeTypeTag
-        className={classNames("has-text-weight-normal")}
+      <Tag
+        className={classNames("has-text-weight-normal", "ml-3")}
         rounded={true}
         outlined={true}
         color={color}
@@ -431,7 +415,7 @@ class DiffFile extends React.Component<Props, State> {
 
     const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
     const innerContent = (
-      <div className="panel-block is-paddingless">
+      <div className="panel-block p-0">
         {fileAnnotations}
         <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
           {(hunks: HunkType[]) =>
@@ -475,13 +459,13 @@ class DiffFile extends React.Component<Props, State> {
       </MenuContext.Consumer>
     );
     const headerButtons = (
-      <AlignRight className={classNames("level-right", "is-flex")}>
+      <div className={classNames("level-right", "is-flex", "ml-auto")}>
         <ButtonGroup>
           {sideBySideToggle}
           {openInFullscreen}
           {fileControls}
         </ButtonGroup>
-      </AlignRight>
+      </div>
     );
 
     let errorModal;
@@ -506,14 +490,14 @@ class DiffFile extends React.Component<Props, State> {
         <div className="panel-heading">
           <div className={classNames("level", "is-flex-wrap-wrap")}>
             <FullWidthTitleHeader
-              className={classNames("level-left", "is-flex", "has-cursor-pointer")}
+              className={classNames("level-left", "is-flex", "is-clickable")}
               onClick={this.toggleCollapse}
               title={this.hoverFileTitle(file)}
             >
               {collapseIcon}
-              <TitleWrapper className={classNames("is-ellipsis-overflow", "is-size-6")}>
+              <span className={classNames("is-ellipsis-overflow", "is-size-6", "ml-1")}>
                 {this.renderFileTitle(file)}
-              </TitleWrapper>
+              </span>
               {this.renderChangeTag(file)}
             </FullWidthTitleHeader>
             {headerButtons}
diff --git a/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx b/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
index bf6494652c..3ac5f2b8ef 100644
--- a/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
+++ b/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
@@ -43,7 +43,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
   return (
     <Modal
       body={
-        <div className={"content"}>
+        <div className="content">
           <HealthCheckFailureList failures={failures} />
         </div>
       }
diff --git a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
index db2da6c247..80d77d0ddc 100644
--- a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
@@ -28,14 +28,12 @@ import styled from "styled-components";
 
 const HunkDivider = styled.div`
   background: #98d8f3;
-  font-size: 0.7rem;
-  padding-left: 1.78em;
 `;
 
 const HunkExpandDivider: FC = ({ children }) => {
   return (
     <Decoration>
-      <HunkDivider>{children}</HunkDivider>
+      <HunkDivider className="is-size-7 pl-5">{children}</HunkDivider>
     </Decoration>
   );
 };
diff --git a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
index 0b337c5bd2..9f596eafd2 100644
--- a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
@@ -24,7 +24,6 @@
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import styled from "styled-components";
 
 type Props = {
   icon: string;
@@ -32,10 +31,6 @@ type Props = {
   onClick: () => Promise<any>;
 };
 
-const ExpandLink = styled.span`
-  cursor: pointer;
-`;
-
 const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   const [t] = useTranslation("repos");
   const [loading, setLoading] = useState(false);
@@ -49,9 +44,9 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   };
 
   return (
-    <ExpandLink onClick={onClickWithLoadingMarker}>
+    <span className="is-clickable" onClick={onClickWithLoadingMarker}>
       <i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
-    </ExpandLink>
+    </span>
   );
 };
 
diff --git a/scm-ui/ui-components/src/repos/JumpToFileButton.tsx b/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
index 59052af3df..c983228a46 100644
--- a/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
+++ b/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
@@ -24,13 +24,11 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 import Tooltip from "../Tooltip";
 import Icon from "../Icon";
 
 const Button = styled(Link)`
   width: 50px;
-  cursor: pointer;
   &:hover {
     color: #33b2e8;
   }
@@ -44,7 +42,7 @@ type Props = {
 const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
   return (
     <Tooltip message={tooltip} location="top">
-      <Button aria-label={tooltip} className="button" to={link}>
+      <Button aria-label={tooltip} className="button is-clickable" to={link}>
         <Icon name="file-code" color="inherit" />
       </Button>
     </Tooltip>
diff --git a/scm-ui/ui-components/src/repos/LoadingDiff.tsx b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
index acfe15e133..3b0d546eeb 100644
--- a/scm-ui/ui-components/src/repos/LoadingDiff.tsx
+++ b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
@@ -22,16 +22,14 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { NotFoundError, useDiff } from "@scm-manager/ui-api";
 import ErrorNotification from "../ErrorNotification";
-import Notification from "../Notification";
-
 import Loading from "../Loading";
+import Notification from "../Notification";
+import Button from "../buttons/Button";
 import Diff from "./Diff";
 import { DiffObjectProps } from "./DiffTypes";
-import { useTranslation } from "react-i18next";
-import Button from "../buttons/Button";
-import styled from "styled-components";
 
 type Props = DiffObjectProps & {
   url: string;
@@ -44,19 +42,15 @@ type NotificationProps = {
   isFetchingNextPage: boolean;
 };
 
-const StyledNotification = styled(Notification)`
-  margin-top: 1.5rem;
-`;
-
 const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingNextPage }) => {
   const [t] = useTranslation("repos");
   return (
-    <StyledNotification type="info">
+    <Notification className="mt-5" type="info">
       <div className="columns is-centered">
         <div className="column">{t("changesets.moreDiffsAvailable")}</div>
         <Button label={t("changesets.loadMore")} action={fetchNextPage} loading={isFetchingNextPage} />
       </div>
-    </StyledNotification>
+    </Notification>
   );
 };
 
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index 47ca59f52a..fbc96ca6cb 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -31,6 +31,7 @@ import RepositoryFlags from "./RepositoryFlags";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
 type DateProp = Date | string;
 
@@ -43,26 +44,9 @@ type Props = {
 
 const ContentRightContainer = styled.div`
   height: calc(80px - 1.5rem);
-  margin-right: 1rem;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const DateWrapper = styled.small`
-  padding-bottom: 0.25rem;
-`;
-
-const QuickActionbar = styled.span`
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
 `;
 
 const QuickAction = styled(Icon)`
-  font-size: 1.25rem;
-
   :hover {
     color: #363636 !important;
   }
@@ -80,7 +64,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
   const [openCloneModal, setOpenCloneModal] = useState(false);
 
   const createContentRight = () => (
-    <ContentRightContainer>
+    <ContentRightContainer
+      className={classNames(
+        "is-flex",
+        "is-flex-direction-column",
+        "is-justify-content-space-between",
+        "is-relative",
+        "mr-4"
+      )}
+    >
       {openCloneModal && (
         <Modal
           size="L"
@@ -98,18 +90,18 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
           closeFunction={() => setOpenCloneModal(false)}
         />
       )}
-      <QuickActionbar>
+      <span className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-flex-end")}>
         <QuickAction
+          className={classNames("is-clickable", "is-size-5")}
           name="download"
           color="info"
-          className="has-cursor-pointer"
           onClick={() => setOpenCloneModal(true)}
           title={t("overview.clone")}
         />
-      </QuickActionbar>
-      <DateWrapper>
+      </span>
+      <small className="pb-1">
         <DateFromNow baseDate={baseDate} date={repository.lastModified || repository.creationDate} />
-      </DateWrapper>
+      </small>
     </ContentRightContainer>
   );
 
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx b/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
index a0adaba7a1..91ff251bfd 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
@@ -23,7 +23,6 @@
  */
 import React from "react";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 import { Icon } from "@scm-manager/ui-components";
 import Tooltip from "../Tooltip";
 
@@ -33,10 +32,6 @@ type Props = {
   tooltip?: string;
 };
 
-const PointerEventsLink = styled(Link)`
-  pointer-events: all;
-`;
-
 class RepositoryEntryLink extends React.Component<Props> {
   render() {
     const { to, icon, tooltip } = this.props;
@@ -51,9 +46,9 @@ class RepositoryEntryLink extends React.Component<Props> {
     }
 
     return (
-      <PointerEventsLink className="level-item" to={to}>
+      <Link className="level-item is-clickable" to={to}>
         {content}
-      </PointerEventsLink>
+      </Link>
     );
   }
 }
diff --git a/scm-ui/ui-components/src/repos/RepositoryFlags.tsx b/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
index a8e6abd95f..78d6fb81e6 100644
--- a/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
@@ -21,15 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, useState } from "react";
-import RepositoryFlag from "./RepositoryFlag";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Repository } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import styled from "styled-components";
-import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
+import { Repository } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { TooltipLocation } from "../Tooltip";
+import RepositoryFlag from "./RepositoryFlag";
+import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
 
 type Props = {
   repository: Repository;
@@ -37,11 +37,6 @@ type Props = {
   tooltipLocation?: TooltipLocation;
 };
 
-const Wrapper = styled.span`
-  display: flex;
-  align-items: center;
-`;
-
 const RepositoryFlagContainer = styled.div`
   .tag {
     margin-left: 0.25rem;
@@ -91,13 +86,13 @@ const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "
   );
 
   return (
-    <Wrapper>
+    <span className={classNames("is-flex", "is-align-items-center", className)}>
       {modal}
       <RepositoryFlagContainer>
         {repositoryFlags}
         <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
       </RepositoryFlagContainer>
-    </Wrapper>
+    </span>
   );
 };
 
diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
index d57739a7fb..0236ab0463 100644
--- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
@@ -36,7 +36,6 @@ import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";
 import { determineLanguage } from "../../languages";
-import styled from "styled-components";
 
 type Props = {
   source: AnnotatedSource;
@@ -57,11 +56,6 @@ const initialState = {
   onLine: false,
 };
 
-const NoSpacingReactSyntaxHighlighter = styled(ReactSyntaxHighlighter)`
-  margin: 0 !important;
-  padding: 0 !important;
-`;
-
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case "enter-line": {
@@ -152,14 +146,15 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
   return (
     <div className="panel-block">
       {popover}
-      <NoSpacingReactSyntaxHighlighter
+      <ReactSyntaxHighlighter
+        className="m-0 p-0"
         showLineNumbers={false}
         language={determineLanguage(source.language)}
         style={highlightingTheme}
         renderer={defaultRenderer}
       >
         {code}
-      </NoSpacingReactSyntaxHighlighter>
+      </ReactSyntaxHighlighter>
     </div>
   );
 };
diff --git a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
index 30615df678..512cee4c3e 100644
--- a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
@@ -44,8 +44,6 @@ const Author = styled(LineElement)`
 `;
 
 const When = styled(LineElement)`
-  display: inline-block;
-
   width: 6.5em;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/scm-ui/ui-components/src/repos/annotate/Popover.tsx b/scm-ui/ui-components/src/repos/annotate/Popover.tsx
index b1f3f3a55e..54351fb037 100644
--- a/scm-ui/ui-components/src/repos/annotate/Popover.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Popover.tsx
@@ -31,7 +31,7 @@ import { DateInput } from "../../useDateFormatter";
 import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
 import AuthorImage from "./AuthorImage";
 import { Action } from "./actions";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 const PopoverContainer = styled.div`
   position: absolute;
@@ -62,16 +62,11 @@ const PopoverContainer = styled.div`
   }
 `;
 
-const SmallHr = styled.hr`
-  margin: 0.5em 0;
-`;
-
 const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
 const PopoverDescription = styled.p`
-  margin-top: 0.5em;
   overflow-wrap: break-word;
 `;
 
@@ -102,13 +97,13 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover"
+      type: "enter-popover",
     });
   };
 
   const OnMouseLeave = () => {
     dispatch({
-      type: "leave-popover"
+      type: "leave-popover",
     });
   };
 
@@ -128,14 +123,14 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
         </span>
         <DateFromNow className="is-pulled-right" date={annotation.when} baseDate={baseDate} />
       </PopoverHeading>
-      <SmallHr />
+      <hr className="my-2" />
       <p>
         {t("changeset.label") + " "}
         <Link to={`/repo/${repository.namespace}/${repository.name}/code/changeset/${annotation.revision}`}>
           {shortRevision(annotation.revision)}
         </Link>
       </p>
-      <PopoverDescription className="content">{annotation.description}</PopoverDescription>
+      <PopoverDescription className="content mt-2">{annotation.description}</PopoverDescription>
     </PopoverContainer>
   );
 };
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
index fb1b6d2d60..de9f728108 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
@@ -38,7 +38,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
     const changesetLink = createChangesetLink(repository, changeset);
     const sourcesLink = createSourcesLink(repository, changeset);
     return (
-      <ButtonAddons className="is-marginless">
+      <ButtonAddons className="m-0">
         <Button link={changesetLink} icon="exchange-alt" label={t("changeset.buttons.details")} reducedMobile={true} />
         <Button link={sourcesLink} icon="code" label={t("changeset.buttons.sources")} reducedMobile={true} />
       </ButtonAddons>
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
index 47823b71fe..b09fb59819 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
@@ -52,39 +52,15 @@ const Wrapper = styled.div`
   }
 `;
 
-const AvatarFigure = styled.figure`
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-`;
-
 const FixedSizedAvatar = styled.div`
   width: 35px;
   height: 35px;
 `;
 
-const Metadata = styled.div`
-  margin-left: 0;
+const FullWidthDiv = styled.div`
   width: 100%;
 `;
 
-const AuthorWrapper = styled.p`
-  margin-top: 0.5rem;
-`;
-
-const VCenteredColumn = styled.div`
-  align-self: center;
-`;
-
-const VCenteredChildColumn = styled.div`
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
 class ChangesetRow extends React.Component<Props> {
   createChangesetId = (changeset: Changeset) => {
     const { repository } = this.props;
@@ -99,25 +75,25 @@ class ChangesetRow extends React.Component<Props> {
 
     return (
       <Wrapper>
-        <div className="columns is-gapless is-mobile">
-          <div className="column is-three-fifths">
-            <div className="columns is-gapless">
-              <div className="column is-four-fifths">
+        <div className={classNames("columns", "is-gapless", "is-mobile")}>
+          <div className={classNames("column", "is-three-fifths")}>
+            <div className={classNames("columns", "is-gapless")}>
+              <div className={classNames("column", "is-four-fifths")}>
                 <div className="media">
                   <AvatarWrapper>
-                    <AvatarFigure className="media-left">
+                    <figure className={classNames("media-left", "mt-2", "mr-2")}>
                       <FixedSizedAvatar className="image">
                         <AvatarImage person={changeset.author} />
                       </FixedSizedAvatar>
-                    </AvatarFigure>
+                    </figure>
                   </AvatarWrapper>
-                  <Metadata className="media-right">
-                    <h4 className="has-text-weight-bold is-ellipsis-overflow">
+                  <FullWidthDiv className={classNames("media-right", "ml-0")}>
+                    <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow")}>
                       <ExtensionPoint
                         name="changeset.description"
                         props={{
                           changeset,
-                          value: description.title
+                          value: description.title,
                         }}
                         renderAll={false}
                       >
@@ -130,36 +106,33 @@ class ChangesetRow extends React.Component<Props> {
                     <p className="is-hidden-desktop">
                       <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
                     </p>
-                    <FlexRow>
-                      <AuthorWrapper className="is-size-7 is-ellipsis-overflow">
+                    <div className="is-flex">
+                      <p className={classNames("is-size-7", "is-ellipsis-overflow", "mt-2")}>
                         <ChangesetAuthor changeset={changeset} />
-                      </AuthorWrapper>
+                      </p>
                       {changeset?.signatures && changeset.signatures.length > 0 && (
-                        <SignatureIcon
-                          className="mx-2 pt-1"
-                          signatures={changeset.signatures}
-                        />
+                        <SignatureIcon className={classNames("mx-2", "pt-1")} signatures={changeset.signatures} />
                       )}
-                    </FlexRow>
-                  </Metadata>
+                    </div>
+                  </FullWidthDiv>
                 </div>
               </div>
-              <VCenteredColumn className="column">
+              <div className={classNames("column", "is-align-self-center")}>
                 <ChangesetTags changeset={changeset} />
-              </VCenteredColumn>
+              </div>
             </div>
           </div>
-          <VCenteredChildColumn className={classNames("column", "is-flex")}>
+          <div className={classNames("column", "is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
             <ChangesetButtonGroup repository={repository} changeset={changeset} />
             <ExtensionPoint
               name="changeset.right"
               props={{
                 repository,
-                changeset
+                changeset,
               }}
               renderAll={true}
             />
-          </VCenteredChildColumn>
+          </div>
         </div>
       </Wrapper>
     );
diff --git a/scm-ui/ui-components/src/table/SortIcon.tsx b/scm-ui/ui-components/src/table/SortIcon.tsx
index ddcc958311..4b7bd78084 100644
--- a/scm-ui/ui-components/src/table/SortIcon.tsx
+++ b/scm-ui/ui-components/src/table/SortIcon.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import styled from "styled-components";
+import classNames from "classnames";
 import Icon from "../Icon";
 
 type Props = {
@@ -30,13 +30,8 @@ type Props = {
   isVisible: boolean;
 };
 
-const IconWithMarginLeft = styled(Icon)`
-  visibility: ${(props: Props) => (props.isVisible ? "visible" : "hidden")};
-  margin-left: 0.25em;
-`;
-
 const SortIcon: FC<Props> = (props: Props) => {
-  return <IconWithMarginLeft name={props.name} isVisible={props.isVisible} />;
+  return <Icon className={classNames("ml-1", { "is-invisible": !props.isVisible })} name={props.name} />;
 };
 
 export default SortIcon;
diff --git a/scm-ui/ui-components/src/table/Table.tsx b/scm-ui/ui-components/src/table/Table.tsx
index ac1c675a27..600b771913 100644
--- a/scm-ui/ui-components/src/table/Table.tsx
+++ b/scm-ui/ui-components/src/table/Table.tsx
@@ -109,7 +109,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         <tr>
           {React.Children.map(children, (child, index) => (
             <th
-              className={isSortable(child) && "has-cursor-pointer"}
+              className={isSortable(child) && "is-clickable"}
               onClick={isSortable(child) ? () => tableSort(index) : undefined}
               onMouseEnter={() => setHoveredColumnIndex(index)}
               onMouseLeave={() => setHoveredColumnIndex(undefined)}
diff --git a/scm-ui/ui-components/src/toast/Toast.tsx b/scm-ui/ui-components/src/toast/Toast.tsx
index 10f2f6af7b..13c4efe518 100644
--- a/scm-ui/ui-components/src/toast/Toast.tsx
+++ b/scm-ui/ui-components/src/toast/Toast.tsx
@@ -59,11 +59,6 @@ const Container = styled.div<Themeable>`
   }
 `;
 
-const Title = styled.h1<Themeable>`
-  margin-bottom: 0.25rem;
-  font-weight: bold;
-`;
-
 const Toast: FC<Props> = ({ children, title, type }) => {
   const rootElement = usePortalRootElement("toastRoot");
   if (!rootElement) {
@@ -74,7 +69,7 @@ const Toast: FC<Props> = ({ children, title, type }) => {
   const theme = getTheme(type);
   const content = (
     <Container theme={theme}>
-      <Title theme={theme}>{title}</Title>
+      <h1 className="mb-1 has-text-weight-bold">{title}</h1>
       <ToastThemeContext.Provider value={theme}>{children}</ToastThemeContext.Provider>
     </Container>
   );
diff --git a/scm-ui/ui-components/src/toast/ToastButton.tsx b/scm-ui/ui-components/src/toast/ToastButton.tsx
index fe403199d4..5f22acdd26 100644
--- a/scm-ui/ui-components/src/toast/ToastButton.tsx
+++ b/scm-ui/ui-components/src/toast/ToastButton.tsx
@@ -23,6 +23,7 @@
  */
 import React, { FC, useContext, MouseEvent } from "react";
 import { ToastThemeContext, Themeable } from "./themes";
+import classNames from "classnames";
 import styled from "styled-components";
 
 type Props = {
@@ -30,25 +31,21 @@ type Props = {
   onClick?: () => void;
 };
 
-const ThemedButton = styled.button.attrs(props => ({
-  className: "button"
+const ThemedButton = styled.button.attrs((props) => ({
+  className: "button",
 }))<Themeable>`
-  color: ${props => props.theme.primary};
-  border-color: ${props => props.theme.primary};
-  background-color: ${props => props.theme.secondary};
+  color: ${(props) => props.theme.primary};
+  border-color: ${(props) => props.theme.primary};
+  background-color: ${(props) => props.theme.secondary};
   font-size: 0.75rem;
 
   &:hover {
-    color: ${props => props.theme.primary};
-    border-color: ${props => props.theme.tertiary};
-    background-color: ${props => props.theme.tertiary};
+    color: ${(props) => props.theme.primary};
+    border-color: ${(props) => props.theme.tertiary};
+    background-color: ${(props) => props.theme.tertiary};
   }
 `;
 
-const ToastButtonIcon = styled.i`
-  margin-right: 0.25rem;
-`;
-
 const ToastButton: FC<Props> = ({ icon, onClick, children }) => {
   const theme = useContext(ToastThemeContext);
 
@@ -61,7 +58,7 @@ const ToastButton: FC<Props> = ({ icon, onClick, children }) => {
 
   return (
     <ThemedButton theme={theme} onClick={handleClick}>
-      {icon && <ToastButtonIcon className={`fas fa-fw fa-${icon}`} />} {children}
+      {icon && <i className={classNames("fas", "fa-fw", `fa-${icon}`, "mr-1")} />} {children}
     </ThemedButton>
   );
 };
diff --git a/scm-ui/ui-components/src/toast/ToastButtons.tsx b/scm-ui/ui-components/src/toast/ToastButtons.tsx
index b7e6877c6c..ff1142d846 100644
--- a/scm-ui/ui-components/src/toast/ToastButtons.tsx
+++ b/scm-ui/ui-components/src/toast/ToastButtons.tsx
@@ -24,9 +24,7 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 
-const Buttons = styled.div`
-  display: flex;
-  padding-top: 0.5rem;
+const FullWidthDiv = styled.div`
   width: 100%;
 
   & > * {
@@ -38,6 +36,6 @@ const Buttons = styled.div`
   }
 `;
 
-const ToastButtons: FC = ({ children }) => <Buttons>{children}</Buttons>;
+const ToastButtons: FC = ({ children }) => <FullWidthDiv className="is-flex pt-2">{children}</FullWidthDiv>;
 
 export default ToastButtons;
diff --git a/scm-ui/ui-components/src/toast/ToastNotification.tsx b/scm-ui/ui-components/src/toast/ToastNotification.tsx
index 5e93c16663..5f850d06f2 100644
--- a/scm-ui/ui-components/src/toast/ToastNotification.tsx
+++ b/scm-ui/ui-components/src/toast/ToastNotification.tsx
@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import { getTheme, Themeable, ToastThemeContext, Type } from "./themes";
-import styled from "styled-components";
 import React, { FC } from "react";
+import classNames from "classnames";
+import styled from "styled-components";
+import { getTheme, Themeable, ToastThemeContext, Type } from "./themes";
 
 type Props = {
   type: Type;
@@ -33,31 +33,22 @@ type Props = {
 };
 
 const Container = styled.div<Themeable>`
-  color: ${props => props.theme.primary};
-  background-color: ${props => props.theme.secondary};
+  color: ${(props) => props.theme.primary};
+  background-color: ${(props) => props.theme.secondary};
   max-width: 18rem;
-  font-size: 0.75rem;
   border-radius: 5px;
-  padding: 1.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
 
   & > p {
     margin-bottom: 0.5rem;
   }
 `;
 
-const Title = styled.h1<Themeable>`
-  margin-bottom: 0.25rem;
-  font-weight: bold;
-`;
-
 const ToastNotification: FC<Props> = ({ children, title, type, close }) => {
   const theme = getTheme(type);
   return (
-    <Container className="notification" theme={theme}>
-      { close ? <button className="delete" onClick={close} /> : null }
-      <Title theme={theme}>{title}</Title>
+    <Container className={classNames("notification", "mt-2", "mb-0", "p-5", "is-size-7")} theme={theme}>
+      {close ? <button className="delete" onClick={close} /> : null}
+      <h1 className={classNames("mb-1", "has-text-weight-bold")}>{title}</h1>
       <ToastThemeContext.Provider value={theme}>{children}</ToastThemeContext.Provider>
     </Container>
   );
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss
index 0a9ef65e0c..9db74be440 100644
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -110,6 +110,7 @@ footer.footer {
 // 6. Import the rest of Bulma
 @import "bulma/bulma";
 @import "bulma-tooltip/dist/css/bulma-tooltip.min";
+@import "bulma-popover/css/bulma-popover";
 
 $dark-75: scale-color($dark, $lightness: 25%);
 $dark-50: scale-color($dark, $lightness: 50%);
@@ -194,7 +195,10 @@ $light-25: darken($high-contrast-light-gray, 45%);
 }
 
 .has-text-blue-light {
-  color: $blue-light !important;
+  color: $blue-light;
+}
+.has-background-blue-light {
+  background-color: $blue-light;
 }
 
 .has-text-high-contrast-warning {
@@ -286,10 +290,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
   background-color: $high-contrast-danger-25;
 }
 
-.has-background-blue-light {
-  background-color: $blue-light;
-}
-
 .has-background-high-contrast-light-gray {
   background-color: $high-contrast-light-gray;
 }
@@ -312,7 +312,7 @@ $light-25: darken($high-contrast-light-gray, 45%);
     background-color: $light;
   }
 
-  +.is-delete {
+  + .is-delete {
     border-color: #aaa;
     border-width: 1px 1px 1px 0;
   }
@@ -520,7 +520,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
   color: #666;
 }
 .has-border-white {
-  border-color: #fff !important;
+  border-color: $white !important;
 }
 ul.is-separated {
   > li:after {
@@ -603,7 +603,7 @@ ul.is-separated {
   width: 100%;
   td,
   th {
-    border-color: #eee;
+    border-color: $white-ter;
     padding: 1rem;
   }
 }
@@ -805,7 +805,6 @@ form .field:not(.is-grouped) {
 .menu {
   div {
     height: 100%;
-    /*border: 1px solid #eee;*/
     margin-bottom: 1rem;
   }
 }
@@ -816,7 +815,7 @@ form .field:not(.is-grouped) {
   color: #fff;
   font-size: 1em;
   font-weight: 600;
-  background-color: #bbb;
+  background-color: $blue;
   border-radius: 5px 5px 0 0;
   padding: 0.5rem 1rem;
   text-transform: none;
@@ -826,9 +825,6 @@ form .field:not(.is-grouped) {
     margin-bottom: 0;
   }
 }
-.menu div:first-child .menu-label {
-  background-color: $blue;
-}
 .menu-list {
   a {
     color: #333;
@@ -843,7 +839,7 @@ form .field:not(.is-grouped) {
   > li {
     ul {
       margin: 0;
-      border-top: 1px solid #eee;
+      border-top: 1px solid $white-ter;
 
       li {
         border-right: none;
@@ -866,15 +862,15 @@ form .field:not(.is-grouped) {
     }
 
     border-radius: 0;
-    border-top: 1px solid #eee;
-    border-left: 1px solid #eee;
-    border-right: 1px solid #eee;
+    border-top: 1px solid $white-ter;
+    border-left: 1px solid $white-ter;
+    border-right: 1px solid $white-ter;
   }
   > li:first-child {
     border-top: none;
   }
   li:last-child {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $white-ter;
   }
   div {
     margin-bottom: 0;
@@ -921,7 +917,7 @@ form .field:not(.is-grouped) {
   margin-left: 0;
 }
 
-// cursor
+// NOTE: use .is-clickable instead!
 .has-cursor-pointer {
   cursor: pointer;
 }
@@ -952,5 +948,3 @@ form .field:not(.is-grouped) {
     @include loader;
   }
 }
-
-@import "bulma-popover/css/bulma-popover";
diff --git a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
index 386a480df2..cdcb4c8991 100644
--- a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
@@ -27,18 +27,10 @@ import styled from "styled-components";
 import { ErrorNotification, Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
 import { useUpdateInfo, useVersion } from "@scm-manager/ui-api";
 
-const BottomMarginDiv = styled.div`
-  margin-bottom: 1.5rem;
-`;
-
 const BoxShadowBox = styled.div`
   box-shadow: 0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgba(40, 177, 232, 0.2);
 `;
 
-const NoBottomMarginSubtitle = styled(Subtitle)`
-  margin-bottom: 0.25rem !important;
-`;
-
 const ImageWrapper = styled.div`
   padding: 0.2rem 0.4rem;
 `;
@@ -68,7 +60,7 @@ const AdminDetails: FC = () => {
               <h3 className="has-text-weight-medium">{t("admin.info.newRelease.title")}</h3>
               <p>
                 {t("admin.info.newRelease.description", {
-                  version: updateInfo?.latestVersion
+                  version: updateInfo?.latestVersion,
                 })}
               </p>
               <a className="button is-warning is-pulled-right" target="_blank" href={updateInfo?.link}>
@@ -85,8 +77,8 @@ const AdminDetails: FC = () => {
   return (
     <>
       <Title title={t("admin.info.title")} />
-      <NoBottomMarginSubtitle subtitle={t("admin.info.currentAppVersion")} />
-      <BottomMarginDiv>{version}</BottomMarginDiv>
+      <Subtitle className="mb-1" subtitle={t("admin.info.currentAppVersion")} />
+      <div className="mb-5">{version}</div>
       {updateInfo ? renderUpdateInfo() : null}
       <BoxShadowBox className="box">
         <article className="media">
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx
index 725158ca59..2882af543a 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx
@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
 type Props = {
@@ -29,15 +30,16 @@ type Props = {
 };
 
 const ActionWrapper = styled.div`
-  justify-content: center;
-  margin-top: 2em;
-  padding: 1em 1em;
-  border: 2px solid #e9f7df;
+  border: 2px solid #e9f7fd;
 `;
 
 export default class PluginBottomActions extends React.Component<Props> {
   render() {
     const { children } = this.props;
-    return <ActionWrapper className="is-flex">{children}</ActionWrapper>;
+    return (
+      <ActionWrapper className={classNames("is-flex", "is-justify-content-center", "mt-5", "p-4")}>
+        {children}
+      </ActionWrapper>
+    );
   }
 }
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
index e01e5b45fb..bbe068485e 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
@@ -40,13 +40,11 @@ const ActionbarWrapper = styled.div`
   }
 `;
 
-const IconWrapper = styled.span`
-  margin-bottom: 0 !important;
-  padding: 0.5rem;
+const IconWrapper = styled.span.attrs((props) => ({
+  className: "level-item mb-0 p-2 is-clickable",
+}))`
   border: 1px solid #cdcdcd; // $dark-25
   border-radius: 4px;
-  cursor: pointer;
-  pointer-events: all;
 
   &:hover {
     border-color: #9a9a9a; // $dark-50
@@ -78,22 +76,22 @@ const PluginEntry: FC<Props> = ({ plugin, openModal }) => {
   const actionBar = () => (
     <ActionbarWrapper className="is-flex">
       {isCloudoguPlugin && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.CLOUDOGU })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.CLOUDOGU })}>
           <Icon title={t("plugins.modal.cloudoguInstall")} name="link" color="success-dark" />
         </IconWrapper>
       )}
       {isInstallable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.INSTALL })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.INSTALL })}>
           <Icon title={t("plugins.modal.install")} name="download" color="info" />
         </IconWrapper>
       )}
       {isUninstallable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.UNINSTALL })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.UNINSTALL })}>
           <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
         </IconWrapper>
       )}
       {isUpdatable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.UPDATE })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.UPDATE })}>
           <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
         </IconWrapper>
       )}
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
index d200e16206..c94579f222 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
@@ -41,10 +41,10 @@ type ParentWithPluginAction = {
   pluginAction?: PluginAction;
 };
 
-const ListParent = styled.div.attrs((props) => ({}))<ParentWithPluginAction>`
-  margin-right: 0;
+const ListParent = styled.div.attrs((props) => ({
+  className: "field-label is-inline-flex mr-0 has-text-left",
+}))<ParentWithPluginAction>`
   min-width: ${(props) => (props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em")};
-  text-align: left;
 `;
 
 const ListChild = styled.div`
@@ -194,9 +194,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
       <div className="media">
         <div className="media-content">
           <div className="field is-horizontal">
-            <ListParent className={classNames("field-label", "is-inline-flex")} pluginAction={pluginAction}>
-              {t("plugins.modal.author")}:
-            </ListParent>
+            <ListParent pluginAction={pluginAction}>{t("plugins.modal.author")}:</ListParent>
             <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.author}</ListChild>
           </div>
           {pluginAction === PluginAction.CLOUDOGU && (
@@ -208,25 +206,19 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
           )}
           {pluginAction === PluginAction.INSTALL && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")} pluginAction={pluginAction}>
-                {t("plugins.modal.version")}:
-              </ListParent>
+              <ListParent pluginAction={pluginAction}>{t("plugins.modal.version")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.version}</ListChild>
             </div>
           )}
           {(pluginAction === PluginAction.UPDATE || pluginAction === PluginAction.UNINSTALL) && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")}>
-                {t("plugins.modal.currentVersion")}:
-              </ListParent>
+              <ListParent>{t("plugins.modal.currentVersion")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.version}</ListChild>
             </div>
           )}
           {pluginAction === PluginAction.UPDATE && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")}>
-                {t("plugins.modal.newVersion")}:
-              </ListParent>
+              <ListParent>{t("plugins.modal.newVersion")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.newVersion}</ListChild>
             </div>
           )}
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
index 1a8a785268..4bc134f95c 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
@@ -23,24 +23,27 @@
  */
 import * as React from "react";
 import classNames from "classnames";
-import styled from "styled-components";
 
 type Props = {
   children?: React.Node;
 };
 
-const ChildWrapper = styled.div`
-  justify-content: flex-end;
-  align-items: center;
-`;
-
 export default class PluginTopActions extends React.Component<Props> {
   render() {
     const { children } = this.props;
     return (
-      <ChildWrapper className={classNames("column", "is-flex", "is-one-fifths", "is-mobile-action-spacing")}>
+      <div
+        className={classNames(
+          "column",
+          "is-one-fifths",
+          "is-mobile-action-spacing",
+          "is-flex",
+          "is-justify-content-flex-end",
+          "is-align-items-center"
+        )}
+      >
         {children}
-      </ChildWrapper>
+      </div>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx b/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
index 413eeefed7..71c205c77a 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
@@ -36,7 +36,7 @@ class AvailableVerbs extends React.Component<Props> {
     let verbs = null;
     if (role.verbs.length > 0) {
       verbs = (
-        <td className="is-paddingless">
+        <td className="p-0">
           <ul>
             {role.verbs.map((verb, key) => {
               return <li key={key}>{t("verbs.repository." + verb + ".displayName")}</li>;
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx b/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
index 5ee01429fe..69785dedea 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
@@ -23,24 +23,18 @@
  */
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
-import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   system?: boolean;
 };
 
-const LeftMarginTag = styled(Tag)`
-  margin-left: 0.75rem;
-  vertical-align: inherit;
-`;
-
 class SystemRoleTag extends React.Component<Props> {
   render() {
     const { system, t } = this.props;
 
     if (system) {
-      return <LeftMarginTag color="dark" label={t("repositoryRole.system")} />;
+      return <Tag className="ml-3" color="dark" label={t("repositoryRole.system")} />;
     }
     return null;
   }
diff --git a/scm-ui/ui-webapp/src/components/InfoBox.tsx b/scm-ui/ui-webapp/src/components/InfoBox.tsx
index 31bf2a050b..0024f30d97 100644
--- a/scm-ui/ui-webapp/src/components/InfoBox.tsx
+++ b/scm-ui/ui-webapp/src/components/InfoBox.tsx
@@ -33,28 +33,13 @@ type Props = WithTranslation & {
   item?: InfoItem;
 };
 
-const BottomMarginA = styled.a`
-  display: blocK;
-  margin-bottom: 1.5rem;
-`;
-
 const FixedSizedIconWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   width: 160px;
   height: 160px;
 `;
 
-const LightBlueIcon = styled(Icon)`
-  margin-bottom: 0.5em;
-  color: #bff1e6;
-`;
-
 const ContentWrapper = styled.div`
   min-height: 10.5rem;
-  margin-left: 1.5em;
 `;
 
 class InfoBox extends React.Component<Props> {
@@ -64,7 +49,7 @@ class InfoBox extends React.Component<Props> {
     const summary = item ? item.summary : t("login.loading");
 
     return (
-      <ContentWrapper className={classNames("media-content", "content")}>
+      <ContentWrapper className={classNames("media-content", "content", "ml-5")}>
         <h4 className="has-text-link">{title}</h4>
         <p>{summary}</p>
       </ContentWrapper>
@@ -75,20 +60,30 @@ class InfoBox extends React.Component<Props> {
     const { item, type, t } = this.props;
     const icon = type === "plugin" ? "puzzle-piece" : "star";
     return (
-      <BottomMarginA href={item._links.self.href}>
+      <a className="is-block mb-5" href={item._links.self.href}>
         <div className="box media">
           <figure className="media-left">
             <FixedSizedIconWrapper
-              className={classNames("image", "box", "has-text-weight-bold", "has-text-white", "has-background-info")}
+              className={classNames(
+                "image",
+                "box",
+                "has-text-weight-bold",
+                "has-text-white",
+                "has-background-info",
+                "is-flex",
+                "is-flex-direction-column",
+                "is-justify-content-center",
+                "is-align-items-center"
+              )}
             >
-              <LightBlueIcon className="fa-2x" name={icon} color="inherit" />
+              <Icon className="has-text-blue-light mb-2 fa-2x" name={icon} color="inherit" />
               <div className="is-size-4">{t("login." + type)}</div>
               <div className="is-size-4">{t("login.tip")}</div>
             </FixedSizedIconWrapper>
           </figure>
           {this.renderBody()}
         </div>
-      </BottomMarginA>
+      </a>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/components/LoginForm.tsx b/scm-ui/ui-webapp/src/components/LoginForm.tsx
index f1ba91faee..d36fc4d567 100644
--- a/scm-ui/ui-webapp/src/components/LoginForm.tsx
+++ b/scm-ui/ui-webapp/src/components/LoginForm.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {FormEvent} from "react";
+import React, { FormEvent } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { ErrorNotification, Image, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
@@ -50,7 +50,7 @@ const AvatarImage = styled(Image)`
   width: 128px;
   height: 128px;
   padding: 5px;
-  background: #fff;
+  background: white;
   border: 1px solid lightgray;
   border-radius: 50%;
 `;
@@ -60,7 +60,7 @@ class LoginForm extends React.Component<Props, State> {
     super(props);
     this.state = {
       username: "",
-      password: ""
+      password: "",
     };
   }
 
@@ -73,13 +73,13 @@ class LoginForm extends React.Component<Props, State> {
 
   handleUsernameChange = (value: string) => {
     this.setState({
-      username: value
+      username: value,
     });
   };
 
   handlePasswordChange = (value: string) => {
     this.setState({
-      password: value
+      password: value,
     });
   };
 
diff --git a/scm-ui/ui-webapp/src/components/LoginInfo.tsx b/scm-ui/ui-webapp/src/components/LoginInfo.tsx
index f2d4977bda..eb380d85cd 100644
--- a/scm-ui/ui-webapp/src/components/LoginInfo.tsx
+++ b/scm-ui/ui-webapp/src/components/LoginInfo.tsx
@@ -114,7 +114,7 @@ class LoginInfo extends React.Component<Props, State> {
 
   createInfoPanel = (info: LoginInfoResponse) => (
     <NoOpErrorBoundary>
-      <div className="column is-7 is-offset-1 is-paddingless">
+      <div className="column is-7 is-offset-1 p-0">
         <InfoBox item={info.feature} type="feature" />
         <InfoBox item={info.plugin} type="plugin" />
       </div>
diff --git a/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx b/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
index 752c739aff..4a17483ce8 100644
--- a/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
+++ b/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
@@ -131,12 +131,12 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
         <h3 className="title">{t("title")}</h3>
         <h4 className="subtitle">{t("adminStep.title")}</h4>
         <p>{t("adminStep.description")}</p>
-        <div className={"columns"}>
+        <div className="columns">
           <div className="column is-full-width">
             <InputField placeholder={t("adminStep.startupToken")} autofocus={true} {...register("startupToken")} />
           </div>
         </div>
-        <div className={"columns"}>
+        <div className="columns">
           <div className="column is-half">
             <InputField
               testId="username-input"
@@ -154,7 +154,7 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
             />
           </div>
         </div>
-        <div className={"columns"}>
+        <div className="columns">
           <div className="column is-full-width">
             <InputField
               label={t("adminStep.email")}
@@ -163,7 +163,7 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
             />
           </div>
         </div>
-        <div className={"columns"}>
+        <div className="columns">
           <div className="column is-half">
             <InputField
               testId="password-input"
@@ -184,7 +184,7 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
           </div>
         </div>
         {errorComponent}
-        <div className={"columns"}>
+        <div className="columns">
           <div className="column is-full-width">
             <SubmitButton
               label={t("adminStep.submit")}
diff --git a/scm-ui/ui-webapp/src/containers/Login.tsx b/scm-ui/ui-webapp/src/containers/Login.tsx
index 1fc9ea3597..a72fe7f027 100644
--- a/scm-ui/ui-webapp/src/containers/Login.tsx
+++ b/scm-ui/ui-webapp/src/containers/Login.tsx
@@ -23,15 +23,10 @@
  */
 import React, { FC } from "react";
 import { Redirect, useLocation } from "react-router-dom";
-import styled from "styled-components";
 import LoginInfo from "../components/LoginInfo";
 import { parse } from "query-string";
 import { useIndexLink, useLogin } from "@scm-manager/ui-api";
 
-const HeroSection = styled.section`
-  padding-top: 2em;
-`;
-
 interface FromObject {
   from?: string;
 }
@@ -62,7 +57,7 @@ const Login: FC = () => {
   }
 
   return (
-    <HeroSection className="hero">
+    <section className="hero pt-6">
       <div className="hero-body">
         <div className="container">
           <div className="columns is-centered">
@@ -70,7 +65,7 @@ const Login: FC = () => {
           </div>
         </div>
       </div>
-    </HeroSection>
+    </section>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/containers/Notifications.tsx b/scm-ui/ui-webapp/src/containers/Notifications.tsx
index 5bca804912..5079722904 100644
--- a/scm-ui/ui-webapp/src/containers/Notifications.tsx
+++ b/scm-ui/ui-webapp/src/containers/Notifications.tsx
@@ -21,8 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, useEffect, useState } from "react";
+import { useHistory, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import {
+  useClearNotifications,
+  useDismissNotification,
+  useNotifications,
+  useNotificationSubscription,
+} from "@scm-manager/ui-api";
+import { Notification, NotificationCollection } from "@scm-manager/ui-types";
 import {
   Button,
   Notification as InfoNotification,
@@ -35,26 +45,6 @@ import {
   DateFromNow,
   devices,
 } from "@scm-manager/ui-components";
-import styled from "styled-components";
-import {
-  useClearNotifications,
-  useDismissNotification,
-  useNotifications,
-  useNotificationSubscription,
-} from "@scm-manager/ui-api";
-import { Notification, NotificationCollection } from "@scm-manager/ui-types";
-import { useHistory, Link } from "react-router-dom";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-
-const Bell = styled(Icon)`
-  font-size: 1.5rem;
-`;
-
-const Container = styled.div`
-  display: flex;
-  cursor: pointer;
-`;
 
 const DropDownMenu = styled.div`
   min-width: 35rem;
@@ -130,7 +120,7 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
   }
   return (
     <tr className={`is-${color(notification)}`}>
-      <VerticalCenteredTd onClick={() => history.push(notification.link)} className="has-cursor-pointer">
+      <VerticalCenteredTd onClick={() => history.push(notification.link)} className="is-clickable">
         <NotificationMessage message={notification.message} />
       </VerticalCenteredTd>
       <DateColumn className="has-text-right">
@@ -143,7 +133,7 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
           <Icon
             name="trash"
             color="black"
-            className="has-cursor-pointer"
+            className="is-clickable"
             title={t("notifications.dismiss")}
             onClick={remove}
           />
@@ -172,7 +162,7 @@ const ClearEntry: FC<ClearEntryProps> = ({ notifications, clearToasts }) => {
     clearStore();
   };
   return (
-    <div className="dropdown-item has-text-centered">
+    <div className={classNames("dropdown-item", "has-text-centered")}>
       <ErrorNotification error={error} />
       <DismissAllButton className="is-outlined" color="link" loading={isLoading} action={clear}>
         <Icon color="link" name="trash" className="mr-1" /> {t("notifications.dismissAll")}
@@ -189,8 +179,8 @@ const NotificationList: FC<Props> = ({ data, clear, remove }) => {
   const top = all.slice(0, 6);
 
   return (
-    <div className="dropdown-content p-0">
-      <table className="table mb-0 card-table">
+    <div className={classNames("dropdown-content", "p-0")}>
+      <table className={classNames("table", "card-table", "mb-0")}>
         <tbody>
           {top.map((n, i) => (
             <NotificationEntry key={i} notification={n} removeToast={remove} />
@@ -198,14 +188,18 @@ const NotificationList: FC<Props> = ({ data, clear, remove }) => {
         </tbody>
       </table>
       {all.length > 6 ? (
-        <p className="has-text-centered has-text-grey">{t("notifications.xMore", { count: all.length - 6 })}</p>
+        <p className={classNames("has-text-centered", "has-text-grey")}>
+          {t("notifications.xMore", { count: all.length - 6 })}
+        </p>
       ) : null}
       {clearLink ? <ClearEntry notifications={data} clearToasts={clear} /> : null}
     </div>
   );
 };
 
-const DropdownMenuContainer: FC = ({ children }) => <div className="dropdown-content p-4">{children}</div>;
+const DropdownMenuContainer: FC = ({ children }) => (
+  <div className={classNames("dropdown-content", "p-4")}>{children}</div>
+);
 
 const NoNotifications: FC = () => {
   const [t] = useTranslation("commons");
@@ -278,12 +272,8 @@ const NotificationSubscription: FC<SubscriptionProps> = ({ notifications, remove
 };
 
 const BellNotificationContainer = styled.div`
-  position: relative;
   width: 2rem;
   height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;
 
 type NotificationCounterProps = {
@@ -304,8 +294,11 @@ type BellNotificationIconProps = {
 const BellNotificationIcon: FC<BellNotificationIconProps> = ({ data, onClick }) => {
   const counter = data?._embedded.notifications.length || 0;
   return (
-    <BellNotificationContainer onClick={onClick}>
-      <Bell iconStyle={counter === 0 ? "far" : "fas"} name="bell" color="white" />
+    <BellNotificationContainer
+      className={classNames("is-relative", "is-flex", "is-justify-content-center", "is-align-items-center")}
+      onClick={onClick}
+    >
+      <Icon className="is-size-4" iconStyle={counter === 0 ? "far" : "fas"} name="bell" color="white" />
       {counter > 0 ? <NotificationCounter count={counter}>{counter < 100 ? counter : "∞"}</NotificationCounter> : null}
     </BellNotificationContainer>
   );
@@ -357,9 +350,9 @@ const Notifications: FC<NotificationProps> = ({ className }) => {
         )}
         onClick={(e) => e.stopPropagation()}
       >
-        <Container className="dropdown-trigger">
+        <div className={classNames("is-flex", "dropdown-trigger", "is-clickable")}>
           <BellNotificationIcon data={data} onClick={() => setOpen((o) => !o)} />
-        </Container>
+        </div>
         <DropDownMenu className="dropdown-menu" id="dropdown-menu" role="menu">
           <ErrorBox error={error} />
           {isLoading ? <LoadingBox /> : null}
diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
index 2bd29ef207..7b85be5af1 100644
--- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
+++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
@@ -34,10 +34,6 @@ import SyntaxModal from "../search/SyntaxModal";
 import SearchErrorNotification from "../search/SearchErrorNotification";
 import queryString from "query-string";
 
-const Field = styled.div`
-  margin-bottom: 0 !important;
-`;
-
 const Input = styled.input`
   border-radius: 4px !important;
 `;
@@ -77,12 +73,6 @@ const EmptyHits: FC = () => {
 
 const ResultHeading = styled.h3`
   border-bottom: 1px solid lightgray;
-  margin: 0 0.5rem;
-  padding: 0.375rem 0.5rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 `;
 
 const DropdownMenu = styled.div`
@@ -91,8 +81,6 @@ const DropdownMenu = styled.div`
 
 const ResultFooter = styled.div`
   border-top: 1px solid lightgray;
-  margin: 0 0.5rem;
-  padding: 0.375rem 0.5rem;
 `;
 
 const AvatarSection: FC<HitProps> = ({ hit }) => {
@@ -115,7 +103,7 @@ const AvatarSection: FC<HitProps> = ({ hit }) => {
 const MoreResults: FC<GotoProps> = ({ gotoDetailSearch }) => {
   const [t] = useTranslation("commons");
   return (
-    <ResultFooter className="dropdown-item has-text-centered">
+    <ResultFooter className={classNames("dropdown-item", "has-text-centered", "mx-2", "px-2", "py-1")}>
       <Button action={gotoDetailSearch} color="primary" data-omnisearch="true">
         {t("search.quickSearch.moreResults")}
       </Button>
@@ -156,7 +144,18 @@ const Hits: FC<HitsProps> = ({ showHelp, gotoDetailSearch, ...rest }) => {
   return (
     <>
       <div aria-expanded="true" role="listbox" className="dropdown-content">
-        <ResultHeading className="dropdown-item">
+        <ResultHeading
+          className={classNames(
+            "dropdown-item",
+            "is-flex",
+            "is-justify-content-space-between",
+            "is-align-items-center",
+            "mx-2",
+            "px-2",
+            "py-1",
+            "has-text-weight-bold"
+          )}
+        >
           <span>{t("search.quickSearch.resultHeading")}</span>
           <SyntaxHelp onClick={showHelp} />
         </ResultHeading>
@@ -331,7 +330,7 @@ const OmniSearch: FC = () => {
   const { onKeyDown, index } = useKeyBoardNavigation(gotoDetailSearch, clearQuery, data?._embedded.hits);
 
   return (
-    <Field className="navbar-item field">
+    <div className={classNames("navbar-item", "field", "mb-0")}>
       {showHelp ? <SyntaxModal close={closeHelp} /> : null}
       <div
         className={classNames("control", "has-icons-right", {
@@ -376,7 +375,7 @@ const OmniSearch: FC = () => {
           </DropdownMenu>
         </div>
       </div>
-    </Field>
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/containers/PluginLoader.tsx b/scm-ui/ui-webapp/src/containers/PluginLoader.tsx
index f43cbdc73c..3f5d8900ae 100644
--- a/scm-ui/ui-webapp/src/containers/PluginLoader.tsx
+++ b/scm-ui/ui-webapp/src/containers/PluginLoader.tsx
@@ -22,9 +22,10 @@
  * SOFTWARE.
  */
 import React, { ReactNode } from "react";
+import classNames from "classnames";
+import styled from "styled-components";
 import { apiClient, Loading, ErrorNotification, ErrorBoundary, Icon } from "@scm-manager/ui-components";
 import loadBundle from "./loadBundle";
-import styled from "styled-components";
 
 type Props = {
   loaded: boolean;
@@ -48,23 +49,11 @@ const BigIcon = styled(Icon)`
   font-size: 10rem;
 `;
 
-const Centered = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const ErrorMessage = styled.span`
-  font-size: 20px;
-  margin: 1.5rem 0;
-`;
-
 class PluginLoader extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      message: "booting"
+      message: "booting",
     };
   }
 
@@ -72,7 +61,7 @@ class PluginLoader extends React.Component<Props, State> {
     const { loaded } = this.props;
     if (!loaded) {
       this.setState({
-        message: "loading plugin information"
+        message: "loading plugin information",
       });
 
       this.getPlugins(this.props.link);
@@ -82,16 +71,16 @@ class PluginLoader extends React.Component<Props, State> {
   getPlugins = (link: string): Promise<any> => {
     return apiClient
       .get(link)
-      .then(response => response.text())
+      .then((response) => response.text())
       .then(JSON.parse)
-      .then(pluginCollection => pluginCollection._embedded.plugins)
+      .then((pluginCollection) => pluginCollection._embedded.plugins)
       .then(this.loadPlugins)
       .then(this.props.callback);
   };
 
   loadPlugins = (plugins: Plugin[]) => {
     this.setState({
-      message: "loading plugins"
+      message: "loading plugins",
     });
 
     const promises = [];
@@ -100,21 +89,21 @@ class PluginLoader extends React.Component<Props, State> {
       promises.push(this.loadPlugin(plugin));
     }
     return promises.reduce((chain, current) => {
-      return chain.then(chainResults => {
-        return current.then(currentResult => [...chainResults, currentResult]);
+      return chain.then((chainResults) => {
+        return current.then((currentResult) => [...chainResults, currentResult]);
       });
     }, Promise.resolve([]));
   };
 
   loadPlugin = (plugin: Plugin) => {
     this.setState({
-      message: `loading ${plugin.name}`
+      message: `loading ${plugin.name}`,
     });
 
     const promises = [];
     for (const bundle of plugin.bundles) {
       promises.push(
-        loadBundle(bundle).catch(error => this.setState({ error, errorMessage: `loading ${plugin.name} failed` }))
+        loadBundle(bundle).catch((error) => this.setState({ error, errorMessage: `loading ${plugin.name} failed` }))
       );
     }
     return Promise.all(promises);
@@ -129,10 +118,17 @@ class PluginLoader extends React.Component<Props, State> {
         <section className="section">
           <div className="container">
             <ErrorBoundary>
-              <Centered>
+              <div
+                className={classNames(
+                  "is-flex",
+                  "is-flex-direction-column",
+                  "is-justify-content-space-between",
+                  "is-align-items-center"
+                )}
+              >
                 <BigIcon name="exclamation-triangle" color="danger" />
-                <ErrorMessage>{errorMessage}</ErrorMessage>
-              </Centered>
+                <div className={classNames("my-5", "is-size-5")}>{errorMessage}</div>
+              </div>
               <ErrorNotification error={error} />
             </ErrorBoundary>
           </div>
diff --git a/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx b/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
index c4e8248650..22dab77e01 100644
--- a/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
+++ b/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
@@ -80,7 +80,7 @@ class ProfileInfo extends React.Component<Props> {
       groups = (
         <tr>
           <th>{t("profile.groups")}</th>
-          <td className="is-paddingless">
+          <td className="p-0">
             <ul>
               {me.groups.map(group => {
                 return <li>{group}</li>;
diff --git a/scm-ui/ui-webapp/src/groups/components/table/Details.tsx b/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
index 7b6960bc41..7cfd134d9b 100644
--- a/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
@@ -23,7 +23,6 @@
  */
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
-import styled from "styled-components";
 import { Group } from "@scm-manager/ui-types";
 import { Checkbox, DateFromNow } from "@scm-manager/ui-components";
 import GroupMember from "./GroupMember";
@@ -32,10 +31,6 @@ type Props = WithTranslation & {
   group: Group;
 };
 
-const StyledMemberList = styled.ul`
-  margin-left: 1em !important;
-`;
-
 class Details extends React.Component<Props> {
   render() {
     const { group, t } = this.props;
@@ -86,12 +81,12 @@ class Details extends React.Component<Props> {
       member = (
         <tr>
           <th>{t("group.members")}</th>
-          <td className="is-paddingless">
-            <StyledMemberList>
+          <td className="p-0">
+            <ul className="ml-4">
               {group._embedded.members.map((member, index) => {
                 return <GroupMember key={index} member={member} />;
               })}
-            </StyledMemberList>
+            </ul>
           </td>
         </tr>
       );
diff --git a/scm-ui/ui-webapp/src/groups/components/table/GroupMember.tsx b/scm-ui/ui-webapp/src/groups/components/table/GroupMember.tsx
index d5f4bc4882..0282311359 100644
--- a/scm-ui/ui-webapp/src/groups/components/table/GroupMember.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/table/GroupMember.tsx
@@ -23,6 +23,7 @@
  */
 import React from "react";
 import { Link } from "react-router-dom";
+import classNames from "classnames";
 import styled from "styled-components";
 import { Member } from "@scm-manager/ui-types";
 import { Icon } from "@scm-manager/ui-components";
@@ -32,9 +33,6 @@ type Props = {
 };
 
 const StyledMember = styled.li`
-  display: inline-block;
-  margin-right: 0.25rem;
-  padding: 0.25rem 0.75rem;
   border: 1px solid #eee;
   border-radius: 4px;
 `;
@@ -59,6 +57,10 @@ export default class GroupMember extends React.Component<Props> {
   render() {
     const { member } = this.props;
     const to = `/user/${member.name}`;
-    return <StyledMember>{this.showName(to, member)}</StyledMember>;
+    return (
+      <StyledMember className={classNames("is-inline-block", "mr-1", "px-3", "py-1")}>
+        {this.showName(to, member)}
+      </StyledMember>
+    );
   }
 }
diff --git a/scm-ui/ui-webapp/src/permissions/components/PermissionsWrapper.tsx b/scm-ui/ui-webapp/src/permissions/components/PermissionsWrapper.tsx
index d993a6d5c7..100535beb0 100644
--- a/scm-ui/ui-webapp/src/permissions/components/PermissionsWrapper.tsx
+++ b/scm-ui/ui-webapp/src/permissions/components/PermissionsWrapper.tsx
@@ -24,8 +24,8 @@
 import React from "react";
 import classNames from "classnames";
 import styled from "styled-components";
-import PermissionCheckbox from "./PermissionCheckbox";
 import { Loading } from "@scm-manager/ui-components";
+import PermissionCheckbox from "./PermissionCheckbox";
 
 type Props = {
   permissions: {
@@ -37,8 +37,6 @@ type Props = {
 };
 
 const StyledWrapper = styled.div`
-  padding-bottom: 0;
-
   & .field .control {
     width: 100%;
     word-wrap: break-word;
@@ -56,7 +54,7 @@ export default class PermissionsWrapper extends React.Component<Props> {
     const permissionArray = Object.keys(permissions);
     return (
       <div className="columns">
-        <StyledWrapper className={classNames("column", "is-half")}>
+        <StyledWrapper className={classNames("column", "is-half", "pb-0")}>
           {permissionArray.slice(0, permissionArray.length / 2 + 1).map(p => (
             <PermissionCheckbox
               key={p}
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
index de7bd28c81..5ad644c7e1 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
@@ -22,49 +22,34 @@
  * SOFTWARE.
  */
 import React from "react";
-import { Branch, Repository } from "@scm-manager/ui-types";
 import { WithTranslation, withTranslation } from "react-i18next";
+import classNames from "classnames";
+import { Branch, Repository } from "@scm-manager/ui-types";
+import { DateFromNow } from "@scm-manager/ui-components";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
-import { DateFromNow } from "@scm-manager/ui-components";
-import styled from "styled-components";
 
 type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
 };
 
-const FlexRow = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-const Created = styled.div`
-  margin-left: 0.5rem;
-  font-size: 0.8rem;
-`;
-
-const Label = styled.strong`
-  margin-right: 0.3rem;
-`;
-
-const Date = styled(DateFromNow)`
-  font-size: 0.8rem;
-`;
-
 class BranchDetail extends React.Component<Props> {
   render() {
     const { repository, branch, t } = this.props;
 
     return (
       <div className="media">
-        <FlexRow className="media-content subtitle">
-          <Label>{t("branch.name")}</Label> {branch.name} <DefaultBranchTag defaultBranch={branch.defaultBranch} />
-          <Created className="is-ellipsis-overflow">
-            {t("branches.overview.lastCommit")} <Date date={branch.lastCommitDate} className="has-text-grey" />
-          </Created>
-        </FlexRow>
+        <div
+          className={classNames("media-content", "subtitle", "is-flex", "is-align-items-center", "is-flex-wrap-wrap")}
+        >
+          <strong className="mr-1">{t("branch.name")}</strong> {branch.name}{" "}
+          <DefaultBranchTag defaultBranch={branch.defaultBranch} />
+          <div className={classNames("is-ellipsis-overflow", "is-size-7", "ml-2")}>
+            {t("branches.overview.lastCommit")}{" "}
+            <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={branch.lastCommitDate} />
+          </div>
+        </div>
         <div className="media-right">
           <BranchButtonGroup repository={repository} branch={branch} />
         </div>
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
index b13e0d9893..ccba85a405 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
@@ -23,11 +23,11 @@
  */
 import React, { FC } from "react";
 import { Link as ReactLink } from "react-router-dom";
-import { Branch, Link } from "@scm-manager/ui-types";
-import DefaultBranchTag from "./DefaultBranchTag";
-import { DateFromNow, Icon } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import classNames from "classnames";
+import { Branch, Link } from "@scm-manager/ui-types";
+import { DateFromNow, Icon } from "@scm-manager/ui-components";
+import DefaultBranchTag from "./DefaultBranchTag";
 
 type Props = {
   baseUrl: string;
@@ -35,11 +35,6 @@ type Props = {
   onDelete: (branch: Branch) => void;
 };
 
-const Created = styled.span`
-  margin-left: 1rem;
-  font-size: 0.8rem;
-`;
-
 const BranchRow: FC<Props> = ({ baseUrl, branch, onDelete }) => {
   const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
   const [t] = useTranslation("repos");
@@ -63,9 +58,9 @@ const BranchRow: FC<Props> = ({ baseUrl, branch, onDelete }) => {
           <DefaultBranchTag defaultBranch={branch.defaultBranch} />
         </ReactLink>
         {branch.lastCommitDate && (
-          <Created className="has-text-grey is-ellipsis-overflow">
+          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
             {t("branches.table.lastCommit")} <DateFromNow date={branch.lastCommitDate} />
-          </Created>
+          </span>
         )}
       </td>
       <td className="is-darker">{deleteButton}</td>
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
index 397d0d0183..6a7a8c7258 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
@@ -23,24 +23,18 @@
  */
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
-import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   defaultBranch?: boolean;
 };
 
-const LeftMarginTag = styled(Tag)`
-  vertical-align: inherit;
-  margin-left: 0.75rem;
-`;
-
 class DefaultBranchTag extends React.Component<Props> {
   render() {
     const { defaultBranch, t } = this.props;
 
     if (defaultBranch) {
-      return <LeftMarginTag color="dark" label={t("branch.defaultTag")} />;
+      return <Tag className="ml-3" color="dark" label={t("branch.defaultTag")} />;
     }
     return null;
   }
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchResults.tsx b/scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchResults.tsx
index fa68965a83..4262bd26d6 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchResults.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchResults.tsx
@@ -46,10 +46,6 @@ const LeftOverflowTd = styled.td`
   text-align: left !important;
 `;
 
-const ResultNotification = styled(Notification)`
-  margin: 1rem;
-`;
-
 type PathResultRowProps = {
   contentBaseUrl: string;
   path: string;
@@ -81,7 +77,7 @@ type ResultTableProps = {
 const ResultTable: FC<ResultTableProps> = ({ contentBaseUrl, paths }) => (
   <table className="table table-hover table-sm is-fullwidth">
     <tbody>
-      {paths.map(path => (
+      {paths.map((path) => (
         <PathResultRow contentBaseUrl={contentBaseUrl} path={path} />
       ))}
     </tbody>
@@ -92,13 +88,17 @@ const FileSearchResults: FC<Props> = ({ query, contentBaseUrl, paths = [] }) =>
   const [t] = useTranslation("repos");
   let body;
   if (query.length <= 1) {
-    body = <ResultNotification type="info">{t("filesearch.notifications.queryToShort")}</ResultNotification>;
+    body = (
+      <Notification className="m-4" type="info">
+        {t("filesearch.notifications.queryToShort")}
+      </Notification>
+    );
   } else if (paths.length === 0) {
     const queryCmp = <strong>{query}</strong>;
     body = (
-      <ResultNotification type="info">
+      <Notification className="m-4" type="info">
         <Trans i18nKey="repos:filesearch.notifications.emptyResult" values={{ query }} components={[queryCmp]} />
-      </ResultNotification>
+      </Notification>
     );
   } else {
     body = <ResultTable contentBaseUrl={contentBaseUrl} paths={paths} />;
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
index 86cac4ebd2..70214cc645 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 import React, { FC, useEffect, useState } from "react";
-import { Branch, Repository } from "@scm-manager/ui-types";
 import { Link, useHistory, useLocation, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { Branch, Repository } from "@scm-manager/ui-types";
 import { urls, usePaths } from "@scm-manager/ui-api";
 import { ErrorNotification, FilterInput, Help, Icon, Loading } from "@scm-manager/ui-components";
 import CodeActionBar from "../components/CodeActionBar";
-import styled from "styled-components";
 import FileSearchResults from "../components/FileSearchResults";
-import { useTranslation } from "react-i18next";
 import { filepathSearch } from "../utils/filepathSearch";
 
 type Props = {
@@ -43,27 +44,14 @@ type Params = {
   revision: string;
 };
 
-const InputContainer = styled.div`
-  padding: 1rem 1.75rem 0 1.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-`;
-
 const HomeLink = styled(Link)`
   border-right: 1px solid lightgray;
-  margin-right: 0.75rem;
-  padding-right: 0.75em;
 `;
 
 const HomeIcon = styled(Icon)`
   line-height: 1.5rem;
 `;
 
-const SearchHelp = styled(Help)`
-  margin-left: 0.75rem;
-`;
-
 const useRevision = () => {
   const { revision } = useParams<Params>();
   return revision;
@@ -113,8 +101,18 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
         switchViewLink={evaluateSwitchViewLink}
       />
       <div className="panel">
-        <InputContainer>
-          <HomeLink to={contentBaseUrl}>
+        <div
+          className={classNames(
+            "is-flex",
+            "is-justify-content-flex-start",
+            "is-align-items-center",
+            "pt-4",
+            "mx-3",
+            "px-4",
+            "pb-0"
+          )}
+        >
+          <HomeLink className={classNames("mr-3", "pr-3")} to={contentBaseUrl}>
             <HomeIcon title={t("filesearch.home")} name="home" color="inherit" />
           </HomeLink>
           <FilterInput
@@ -124,8 +122,8 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
             filter={search}
             autoFocus={true}
           />
-          <SearchHelp message={t("filesearch.input.help")} />
-        </InputContainer>
+          <Help className="ml-3" message={t("filesearch.input.help")} />
+        </div>
         <ErrorNotification error={error} />
         {isLoading ? <Loading /> : <FileSearchResults contentBaseUrl={contentBaseUrl} query={query} paths={result} />}
       </div>
diff --git a/scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx b/scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx
index 9611d48e28..f22b5be696 100644
--- a/scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx
@@ -21,12 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { RepositoryUrlImport } from "@scm-manager/ui-types";
 import { InputField, validation } from "@scm-manager/ui-components";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 
 type Props = {
   repository: RepositoryUrlImport;
@@ -35,14 +33,6 @@ type Props = {
   disabled?: boolean;
 };
 
-const Column = styled.div`
-  padding: 0 0.75rem;
-`;
-
-const Columns = styled.div`
-  padding: 0.75rem 0 0;
-`;
-
 const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled }) => {
   const [t] = useTranslation("repos");
   const [urlValidationError, setUrlValidationError] = useState(false);
@@ -65,8 +55,8 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
   };
 
   return (
-    <Columns className="columns is-multiline">
-      <Column className="column is-full">
+    <div className="columns is-multiline pt-3">
+      <div className="column is-full px-3">
         <InputField
           label={t("import.importUrl")}
           onChange={handleImportUrlChange}
@@ -77,27 +67,27 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
           disabled={disabled}
           onBlur={handleImportUrlBlur}
         />
-      </Column>
-      <Column className="column is-half">
+      </div>
+      <div className="column is-half px-3">
         <InputField
           label={t("import.username")}
-          onChange={username => onChange({ ...repository, username })}
+          onChange={(username) => onChange({ ...repository, username })}
           value={repository.username}
           helpText={t("help.usernameHelpText")}
           disabled={disabled}
         />
-      </Column>
-      <Column className="column is-half">
+      </div>
+      <div className="column is-half px-3">
         <InputField
           label={t("import.password")}
-          onChange={password => onChange({ ...repository, password })}
+          onChange={(password) => onChange({ ...repository, password })}
           value={repository.password}
           type="password"
           helpText={t("help.passwordHelpText")}
           disabled={disabled}
         />
-      </Column>
-    </Columns>
+      </div>
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
index b4b190ca09..e74ebd8753 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
@@ -42,7 +42,7 @@ import {
   Icon,
   Level,
   SignatureIcon,
-  Tooltip
+  Tooltip,
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
@@ -54,14 +54,6 @@ type Props = {
   fileControlFactory?: FileControlFactory;
 };
 
-const RightMarginP = styled.p`
-  margin-right: 1em;
-`;
-
-const BottomMarginLevel = styled(Level)`
-  margin-bottom: 1rem !important;
-`;
-
 const countContributors = (changeset: Changeset) => {
   if (changeset.contributors) {
     return changeset.contributors.length + 1;
@@ -69,16 +61,6 @@ const countContributors = (changeset: Changeset) => {
   return 1;
 };
 
-const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
-const ContributorLine = styled.div`
-  display: flex;
-  cursor: pointer;
-`;
-
 const ContributorColumn = styled.p`
   flex-grow: 0;
   overflow: hidden;
@@ -92,25 +74,7 @@ const CountColumn = styled.p`
   white-space: nowrap;
 `;
 
-const ContributorDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-`;
-
-const ContributorToggleLine = styled.p`
-  cursor: pointer;
-  /** margin-bottom is inherit from content p **/
-  margin-bottom: 0.5rem !important;
-`;
-
-const ChangesetSummary = styled.div`
-  display: flex;
-`;
-
 const SeparatedParents = styled.div`
-  margin-left: 1em;
-
   a + a:before {
     content: ",\\00A0";
     color: #4a4a4a;
@@ -126,33 +90,33 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
 
   if (open) {
     return (
-      <ContributorDetails>
-        <FlexRow>
-          <ContributorToggleLine onClick={e => setOpen(!open)} className="is-ellipsis-overflow">
+      <div className="is-flex is-flex-direction-column mb-4">
+        <div className="is-flex">
+          <p className="is-ellipsis-overflow is-clickable mb-2" onClick={(e) => setOpen(!open)}>
             <Icon name="angle-down" /> {t("changeset.contributors.list")}
-          </ContributorToggleLine>
+          </p>
           {signatureIcon}
-        </FlexRow>
+        </div>
         <ContributorTable changeset={changeset} />
-      </ContributorDetails>
+      </div>
     );
   }
 
   return (
     <>
-      <ContributorLine onClick={e => setOpen(!open)}>
+      <div className="is-flex is-clickable" onClick={(e) => setOpen(!open)}>
         <ContributorColumn className="is-ellipsis-overflow">
           <Icon name="angle-right" /> <ChangesetAuthor changeset={changeset} />
         </ContributorColumn>
         {signatureIcon}
-        <CountColumn className={"is-hidden-mobile is-hidden-tablet-only is-hidden-desktop-only"}>
+        <CountColumn className="is-hidden-mobile is-hidden-tablet-only is-hidden-desktop-only">
           (
           <span className="has-text-link">
             {t("changeset.contributors.count", { count: countContributors(changeset) })}
           </span>
           )
         </CountColumn>
-      </ContributorLine>
+      </div>
     </>
   );
 };
@@ -178,13 +142,13 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
 
   return (
     <>
-      <div className={classNames("content", "is-marginless")}>
+      <div className={classNames("content", "m-0")}>
         <h4>
           <ExtensionPoint
             name="changeset.description"
             props={{
               changeset,
-              value: description.title
+              value: description.title,
             }}
             renderAll={false}
           >
@@ -193,23 +157,23 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
         </h4>
         <article className="media">
           <AvatarWrapper>
-            <RightMarginP className={classNames("image", "is-64x64")}>
+            <p className={classNames("image", "is-64x64", "mr-4")}>
               <AvatarImage person={changeset.author} />
-            </RightMarginP>
+            </p>
           </AvatarWrapper>
           <div className="media-content">
             <Contributors changeset={changeset} />
-            <ChangesetSummary className="is-ellipsis-overflow">
+            <div className="is-flex is-ellipsis-overflow">
               <p>
                 <Trans i18nKey="repos:changeset.summary" components={[id, date]} />
               </p>
               {parents && parents?.length > 0 ? (
-                <SeparatedParents>
+                <SeparatedParents className="ml-4">
                   {t("changeset.parents.label", { count: parents?.length }) + ": "}
                   {parents}
                 </SeparatedParents>
               ) : null}
-            </ChangesetSummary>
+            </div>
           </div>
           <div className="media-right">
             <ChangesetTags changeset={changeset} />
@@ -244,7 +208,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
                   name="changeset.description"
                   props={{
                     changeset,
-                    value: item
+                    value: item,
                   }}
                   renderAll={false}
                 >
@@ -257,7 +221,8 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
         </p>
       </div>
       <div>
-        <BottomMarginLevel
+        <Level
+          className="mb-4"
           right={
             <Button
               action={collapseDiffs}
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
index 19c9102065..c39e7ce76c 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
@@ -97,7 +97,7 @@ const ContributorTable: FC<Props> = ({ changeset }) => {
       {getContributorsByType().map(contributor => (
         <tr key={contributor.type}>
           <SizedTd>{t("changeset.contributor.type." + contributor.type)}:</SizedTd>
-          <td className="is-ellipsis-overflow is-marginless">
+          <td className="is-ellipsis-overflow m-0">
             <CommaSeparatedList>
               {contributor.persons!.map(person => (
                 <Contributor key={person.name} person={person} />
diff --git a/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx b/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
index 4c935dac67..2e184ee316 100644
--- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
@@ -22,28 +22,14 @@
  * SOFTWARE.
  */
 import React, { FC, useCallback, useEffect, useState } from "react";
-import styled from "styled-components";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { IndexResources, Repository, RepositoryType, CUSTOM_NAMESPACE_STRATEGY } from "@scm-manager/ui-types";
 import { Checkbox, Level, Select, SubmitButton } from "@scm-manager/ui-components";
 import NamespaceAndNameFields from "../NamespaceAndNameFields";
 import RepositoryInformationForm from "../RepositoryInformationForm";
 
-const CheckboxWrapper = styled.div`
-  margin-top: 2em;
-  flex: 1;
-`;
-
-const SelectWrapper = styled.div`
-  flex: 1;
-`;
-
-const SpaceBetween = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
 type Props = {
   createRepository?: (repo: RepositoryCreation, shouldInit: boolean) => void;
   modifyRepository?: (repo: Repository) => void;
@@ -65,7 +51,7 @@ const RepositoryForm: FC<Props> = ({
   repositoryTypes,
   namespaceStrategy,
   loading,
-  indexResources
+  indexResources,
 }) => {
   const [repo, setRepo] = useState<Repository>({
     name: "",
@@ -73,15 +59,15 @@ const RepositoryForm: FC<Props> = ({
     type: "",
     contact: "",
     description: "",
-    _links: {}
+    _links: {},
   });
   const [initRepository, setInitRepository] = useState(false);
   const [contextEntries, setContextEntries] = useState({});
   const setCreationContextEntry = useCallback(
     (key: string, value: any) => {
-      setContextEntries(entries => ({
+      setContextEntries((entries) => ({
         ...entries,
-        [key]: value
+        [key]: value,
       }));
     },
     [setContextEntries]
@@ -102,7 +88,7 @@ const RepositoryForm: FC<Props> = ({
   const isValid = () => {
     return (
       !(!repo.name || (namespaceStrategy === CUSTOM_NAMESPACE_STRATEGY && !repo.namespace)) &&
-      Object.values(valid).every(v => v)
+      Object.values(valid).every((v) => v)
     );
   };
 
@@ -119,10 +105,10 @@ const RepositoryForm: FC<Props> = ({
 
   const createSelectOptions = (repositoryTypes?: RepositoryType[]) => {
     if (repositoryTypes) {
-      return repositoryTypes.map(repositoryType => {
+      return repositoryTypes.map((repositoryType) => {
         return {
           label: repositoryType.displayName,
-          value: repositoryType.name
+          value: repositoryType.name,
         };
       });
     }
@@ -137,28 +123,28 @@ const RepositoryForm: FC<Props> = ({
     const extensionProps = {
       repository: repo,
       setCreationContextEntry: setCreationContextEntry,
-      indexResources: indexResourcesWithLinks
+      indexResources: indexResourcesWithLinks,
     };
     return (
       <>
         <NamespaceAndNameFields
           repository={repo}
           onChange={setRepo}
-          setValid={namespaceAndName => setValid({ ...valid, namespaceAndName })}
+          setValid={(namespaceAndName) => setValid({ ...valid, namespaceAndName })}
           disabled={disabled}
         />
-        <SpaceBetween>
-          <SelectWrapper>
+        <div className="columns">
+          <div className={classNames("column", "is-half")}>
             <Select
               label={t("repository.type")}
-              onChange={type => setRepo({ ...repo, type })}
+              onChange={(type) => setRepo({ ...repo, type })}
               value={repo ? repo.type : ""}
               options={createSelectOptions(repositoryTypes)}
               helpText={t("help.typeHelpText")}
               disabled={disabled}
             />
-          </SelectWrapper>
-          <CheckboxWrapper>
+          </div>
+          <div className={classNames("column", "is-half", "is-align-self-flex-end")}>
             <Checkbox
               label={t("repositoryForm.initializeRepository")}
               checked={initRepository}
@@ -169,8 +155,8 @@ const RepositoryForm: FC<Props> = ({
             {initRepository && (
               <ExtensionPoint name="repos.create.initialize" props={extensionProps} renderAll={true} />
             )}
-          </CheckboxWrapper>
-        </SpaceBetween>
+          </div>
+        </div>
       </>
     );
   };
@@ -199,7 +185,7 @@ const RepositoryForm: FC<Props> = ({
         repository={repo}
         onChange={setRepo}
         disabled={disabled}
-        setValid={contact => setValid({ ...valid, contact })}
+        setValid={(contact) => setValid({ ...valid, contact })}
       />
       {submitButton()}
     </form>
diff --git a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
index 45c56639bb..980909f7f5 100644
--- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
@@ -21,22 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC } from "react";
-import styled from "styled-components";
-import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-
-const MarginIcon = styled(Icon)`
-  padding-right: 0.5rem;
-`;
-
-const SmallButton = styled(Button)`
-  border-radius: 4px;
-  font-size: 1rem;
-  font-weight: 600;
-`;
+import classNames from "classnames";
+import styled from "styled-components";
+import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
 
 const TopLevel = styled(Level)`
   margin-top: 1.5rem;
@@ -62,10 +52,14 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
   const [t] = useTranslation(["repos", "plugins"]);
 
   return (
-    <SmallButton color={isSelected ? "link is-selected" : undefined} link={!isSelected ? href : undefined}>
-      <MarginIcon name={icon} color={isSelected ? "white" : "default"} />
-      <p className="is-hidden-mobile is-hidden-tablet-only">{t(`plugins:${label}`, label)}</p>
-    </SmallButton>
+    <Button
+      className="is-size-6"
+      color={isSelected ? "link is-selected" : undefined}
+      link={!isSelected ? href : undefined}
+    >
+      <Icon className="pr-2" name={icon} color={isSelected ? "white" : "default"} />
+      <p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
+    </Button>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
index c36d7e40b0..088e329a28 100644
--- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
@@ -37,12 +37,12 @@ const RepositoryGroupEntry: FC<Props> = ({ group }) => {
 
   const settingsLink = group.namespace?._links?.permissions && (
     <Link to={`/namespace/${group.name}/settings`}>
-      <Icon color="is-link" name="cog" title={t("repositoryOverview.settings.tooltip")} className={"is-size-6 ml-2"} />
+      <Icon color="is-link" name="cog" title={t("repositoryOverview.settings.tooltip")} className="is-size-6 ml-2" />
     </Link>
   );
   const namespaceHeader = (
     <>
-      <Link to={`/repos/${group.name}/`} className={"has-text-dark"}>
+      <Link to={`/repos/${group.name}/`} className="has-text-dark">
         {group.name}
       </Link>{" "}
       {settingsLink}
diff --git a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
index fbbd63b48b..fb7615acf2 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
@@ -31,18 +31,17 @@ import {
   InputField,
   Level,
   Notification,
-  Subtitle
+  Subtitle,
 } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { ExportInfo, Link, Repository } from "@scm-manager/ui-types";
 import { useExportInfo, useExportRepository } from "@scm-manager/ui-api";
 import styled from "styled-components";
+import classNames from "classnames";
 
 const InfoBox = styled.div`
   white-space: pre-line;
   background-color: #ccecf9;
-  margin: 1rem 0;
-  padding: 1rem;
   border-radius: 2px;
   border-left: 0.2rem solid;
   border-color: #33b2e8;
@@ -60,7 +59,7 @@ const ExportInterruptedNotification = () => {
 const ExportInfoBox: FC<{ exportInfo: ExportInfo }> = ({ exportInfo }) => {
   const [t] = useTranslation("repos");
   return (
-    <InfoBox>
+    <InfoBox className={classNames("my-4", "p-4")}>
       <strong>{t("export.exportInfo.infoBoxTitle")}</strong>
       <p>{t("export.exportInfo.exporter", { username: exportInfo.exporterName })}</p>
       <p>
@@ -90,7 +89,7 @@ const ExportRepository: FC<Props> = ({ repository }) => {
     isLoading: isLoadingExport,
     error: errorExport,
     data: exportedInfo,
-    exportRepository
+    exportRepository,
   } = useExportRepository();
 
   useEffect(() => {
@@ -144,7 +143,7 @@ const ExportRepository: FC<Props> = ({ repository }) => {
         helpText={t("export.encrypt.helpText")}
       />
       {encrypt && (
-        <div className="columns column is-half">
+        <div className={classNames("columns", "column", "is-half")}>
           <InputField
             label={t("export.password.label")}
             helpText={t("export.password.helpText")}
@@ -172,7 +171,7 @@ const ExportRepository: FC<Props> = ({ repository }) => {
                 exportRepository(repository, {
                   compressed,
                   password: encrypt ? password : "",
-                  withMetadata: fullExport
+                  withMetadata: fullExport,
                 })
               }
               loading={isLoadingInfo || isLoadingExport}
diff --git a/scm-ui/ui-webapp/src/repos/containers/HealthCheckWarning.tsx b/scm-ui/ui-webapp/src/repos/containers/HealthCheckWarning.tsx
index ab72338dd7..a75b894bbf 100644
--- a/scm-ui/ui-webapp/src/repos/containers/HealthCheckWarning.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/HealthCheckWarning.tsx
@@ -51,9 +51,9 @@ const HealthCheckWarning: FC<Props> = ({ repository }) => {
   return (
     <Notification type="danger">
       {modal}
-      <div className={"has-cursor-pointer"} onClick={() => setShowHealthCheck(true)}>
+      <div className="is-clickable" onClick={() => setShowHealthCheck(true)}>
         <div>{t("repositoryForm.healthCheckWarning.title")}</div>
-        <div className={"is-small"}>{t("repositoryForm.healthCheckWarning.subtitle")}</div>
+        <div className="is-small">{t("repositoryForm.healthCheckWarning.subtitle")}</div>
       </div>
     </Notification>
   );
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryDangerZone.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryDangerZone.tsx
index fa0edbb2a4..11f488d046 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryDangerZone.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryDangerZone.tsx
@@ -21,14 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import { Repository } from "@scm-manager/ui-types";
+import { Subtitle } from "@scm-manager/ui-components";
 import RenameRepository from "./RenameRepository";
 import DeleteRepo from "./DeleteRepo";
-import styled from "styled-components";
-import { Subtitle } from "@scm-manager/ui-components";
-import { useTranslation } from "react-i18next";
 import ArchiveRepo from "./ArchiveRepo";
 import UnarchiveRepo from "./UnarchiveRepo";
 
@@ -37,7 +36,6 @@ type Props = {
 };
 
 export const DangerZoneContainer = styled.div`
-  padding: 1.5rem 1rem;
   border: 1px solid #ff6a88;
   border-radius: 5px;
 
@@ -83,7 +81,7 @@ const RepositoryDangerZone: FC<Props> = ({ repository }) => {
     <>
       <hr />
       <Subtitle subtitle={t("repositoryForm.dangerZone")} />
-      <DangerZoneContainer>{dangerZone}</DangerZoneContainer>
+      <DangerZoneContainer className="px-4 py-5">{dangerZone}</DangerZoneContainer>
     </>
   );
 };
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 429e5fa53e..341b480b01 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { useState } from "react";
-import { Link as RouteLink, match, Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
+import { Link as RouteLink, Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Changeset, Link } from "@scm-manager/ui-types";
@@ -61,7 +61,6 @@ import { useIndexLinks, useRepository } from "@scm-manager/ui-api";
 import styled from "styled-components";
 
 const TagGroup = styled.span`
-  font-weight: bold;
   & > * {
     margin-right: 0.25rem;
   }
@@ -159,7 +158,7 @@ const RepositoryRoot = () => {
 
   const titleComponent = (
     <>
-      <RouteLink to={`/repos/${repository.namespace}/`} className={"has-text-dark"}>
+      <RouteLink to={`/repos/${repository.namespace}/`} className="has-text-dark">
         {repository.namespace}
       </RouteLink>
       /{repository.name}
@@ -220,7 +219,7 @@ const RepositoryRoot = () => {
         afterTitle={
           <div className="is-flex">
             <ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />
-            <TagGroup>
+            <TagGroup className="has-text-weight-bold">
               <RepositoryFlags repository={repository} tooltipLocation="bottom" />
             </TagGroup>
           </div>
diff --git a/scm-ui/ui-webapp/src/repos/containers/RunHealthCheck.tsx b/scm-ui/ui-webapp/src/repos/containers/RunHealthCheck.tsx
index 238a3d0d59..a4cbd8995e 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RunHealthCheck.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RunHealthCheck.tsx
@@ -26,16 +26,11 @@ import { useTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { Button, ErrorNotification, Level, Subtitle } from "@scm-manager/ui-components";
 import { useRunHealthCheck } from "@scm-manager/ui-api";
-import styled from "styled-components";
 
 type Props = {
   repository: Repository;
 };
 
-const MarginTopButton = styled(Button)`
-  margin-top: 1rem;
-`;
-
 const RunHealthCheck: FC<Props> = ({ repository }) => {
   const { isLoading, error, runHealthCheck } = useRunHealthCheck();
   const [t] = useTranslation("repos");
@@ -56,7 +51,8 @@ const RunHealthCheck: FC<Props> = ({ repository }) => {
       </p>
       <Level
         right={
-          <MarginTopButton
+          <Button
+            className="mt-4"
             color="warning"
             icon="heartbeat"
             label={t("runHealthCheck.button")}
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx
index cb2ff9143a..16db1487e9 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx
@@ -24,7 +24,6 @@
 import React, { FC } from "react";
 import { File } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading, MarkdownView } from "@scm-manager/ui-components";
-import styled from "styled-components";
 import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
 import { useLocation } from "react-router-dom";
 import { useFileContent } from "@scm-manager/ui-api";
@@ -34,10 +33,6 @@ type Props = {
   basePath: string;
 };
 
-const MarkdownContent = styled.div`
-  padding: 0.5rem;
-`;
-
 const MarkdownViewer: FC<Props> = ({ file, basePath }) => {
   const { isLoading, error, data: content } = useFileContent(file);
   const location = useLocation();
@@ -53,9 +48,9 @@ const MarkdownViewer: FC<Props> = ({ file, basePath }) => {
   const permalink = replaceBranchWithRevision(location.pathname, file.revision);
 
   return (
-    <MarkdownContent>
+    <div className="p-2">
       <MarkdownView content={content} basePath={basePath} permalink={permalink} enableAnchorHeadings={true} />
-    </MarkdownContent>
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
index e194667894..7d417b8ab2 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {FC, useState} from "react";
+import React, { FC, useState } from "react";
 import styled from "styled-components";
 import MarkdownViewer from "./MarkdownViewer";
 import SourcecodeViewer from "./SourcecodeViewer";
-import {File} from "@scm-manager/ui-types";
-import {Button} from "@scm-manager/ui-components";
-import {useTranslation} from "react-i18next";
+import { File } from "@scm-manager/ui-types";
+import { Button } from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
 
 const ToggleButton = styled(Button)`
   max-width: 1rem;
@@ -37,17 +37,13 @@ const ToggleButton = styled(Button)`
   z-index: 30;
 `;
 
-const Container = styled.div`
-  position: relative;
-`;
-
 type Props = {
   file: File;
   basePath: string;
 };
 
-const SwitchableMarkdownViewer: FC<Props> = ({file, basePath}) => {
-  const {t} = useTranslation("repos");
+const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
+  const { t } = useTranslation("repos");
   const [renderMarkdown, setRenderMarkdown] = useState(true);
 
   const toggleMarkdown = () => {
@@ -55,7 +51,7 @@ const SwitchableMarkdownViewer: FC<Props> = ({file, basePath}) => {
   };
 
   return (
-    <Container>
+    <div className="is-relative">
       <ToggleButton
         color={renderMarkdown ? "link" : ""}
         action={toggleMarkdown}
@@ -65,11 +61,14 @@ const SwitchableMarkdownViewer: FC<Props> = ({file, basePath}) => {
             : t("sources.content.toggleButton.showMarkdown")
         }
       >
-        <i className="fab fa-markdown"/>
+        <i className="fab fa-markdown" />
       </ToggleButton>
-      {renderMarkdown ? <MarkdownViewer file={file} basePath={basePath}/> :
-        <SourcecodeViewer file={file} language={"MARKDOWN"}/>}
-    </Container>
+      {renderMarkdown ? (
+        <MarkdownViewer file={file} basePath={basePath} />
+      ) : (
+        <SourcecodeViewer file={file} language={"MARKDOWN"} />
+      )}
+    </div>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index d20604f9cd..8d702d4ec9 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -49,14 +49,6 @@ const HeaderWrapper = styled.div`
   padding: 0.5em 0.75em;
 `;
 
-const LighterGreyBackgroundPanelBlock = styled.div`
-  background-color: #fbfbfb;
-`;
-
-const LighterGreyBackgroundTable = styled.table`
-  background-color: #fbfbfb;
-`;
-
 const BorderBottom = styled.div`
   border-bottom: solid 1px #dbdbdb;
 `;
@@ -65,10 +57,6 @@ const FullWidthTitleHeader = styled.div`
   max-width: 100%;
 `;
 
-const AlignRight = styled.div`
-  margin-left: auto;
-`;
-
 const BorderLessDiv = styled.div`
   margin: -1.25rem;
   border: none;
@@ -116,13 +104,13 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
       <HeaderWrapper>
         <div className={classNames("level", "is-flex-wrap-wrap")}>
           <FullWidthTitleHeader
-            className={classNames("level-left", "is-flex", "has-cursor-pointer", "is-word-break", "mr-2")}
+            className={classNames("level-left", "is-flex", "is-clickable", "is-word-break", "mr-2")}
             onClick={toggleCollapse}
           >
             <Icon className={classNames("is-inline", "mr-2")} name={`${icon} fa-fw`} color="inherit" />
             {file.name}
           </FullWidthTitleHeader>
-          <AlignRight className={classNames("level-right", "buttons")}>
+          <div className={classNames("level-right", "buttons", "ml-auto")}>
             {selector}
             <OpenInFullscreenButton
               modalTitle={file?.name}
@@ -139,7 +127,7 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
               }}
               renderAll={true}
             />
-          </AlignRight>
+          </div>
         </div>
       </HeaderWrapper>
     );
@@ -163,8 +151,8 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
     if (!collapsed) {
       return (
         <>
-          <LighterGreyBackgroundPanelBlock className="panel-block">
-            <LighterGreyBackgroundTable className="table">
+          <div className="panel-block has-background-white-bis">
+            <table className="table has-background-white-bis">
               <tbody>
                 <tr>
                   <td>{t("sources.content.path")}</td>
@@ -198,8 +186,8 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
                   }}
                 />
               </tbody>
-            </LighterGreyBackgroundTable>
-          </LighterGreyBackgroundPanelBlock>
+            </table>
+          </div>
           <BorderBottom />
         </>
       );
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
index 5db1fe962f..49f76c418d 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
@@ -21,12 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import { Repository, Tag } from "@scm-manager/ui-types";
 import { DateFromNow, SignatureIcon } from "@scm-manager/ui-components";
-import styled from "styled-components";
 import TagButtonGroup from "./TagButtonGroup";
 
 type Props = {
@@ -34,37 +33,22 @@ type Props = {
   tag: Tag;
 };
 
-const FlexRow = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-const Created = styled.div`
-  margin-left: 0.5rem;
-  font-size: 0.8rem;
-`;
-
-const Label = styled.strong`
-  margin-right: 0.3rem;
-`;
-
-const Date = styled(DateFromNow)`
-  font-size: 0.8rem;
-`;
-
 const TagDetail: FC<Props> = ({ tag, repository }) => {
   const [t] = useTranslation("repos");
 
   return (
     <div className="media">
-      <FlexRow className="media-content">
-        <Label className="subtitle has-text-weight-bold has-text-black">{t("tag.name") + ": "} </Label> <span className="subtitle">{tag.name}</span>
+      <div className={classNames("media-content", "is-flex", "is-flex-wrap-wrap", "is-align-items-center")}>
+        <strong className={classNames("subtitle", "has-text-weight-bold", "has-text-black", "mr-1")}>
+          {t("tag.name") + ": "}{" "}
+        </strong>{" "}
+        <span className="subtitle">{tag.name}</span>
         <SignatureIcon signatures={tag.signatures} className="ml-2 mb-5" />
-        <Created className="is-ellipsis-overflow mb-5">
-          {t("tags.overview.created")} <Date date={tag.date} className="has-text-grey" />
-        </Created>
-      </FlexRow>
+        <div className={classNames("is-ellipsis-overflow", "mb-5", "ml-2", "is-size-7")}>
+          {t("tags.overview.created")}{" "}
+          <DateFromNow className={classNames("has-text-grey", "is-size-7")} date={tag.date} />
+        </div>
+      </div>
       <div className="media-right">
         <TagButtonGroup repository={repository} tag={tag} />
       </div>
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
index f1b601be81..da57846d7e 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
@@ -21,12 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC } from "react";
-import { useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import { Tag, Link } from "@scm-manager/ui-types";
-import styled from "styled-components";
 import { DateFromNow, Icon } from "@scm-manager/ui-components";
 
 type Props = {
@@ -36,11 +35,6 @@ type Props = {
   // deleting: boolean;
 };
 
-const Created = styled.span`
-  margin-left: 1rem;
-  font-size: 0.8rem;
-`;
-
 const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
   const [t] = useTranslation("repos");
 
@@ -61,9 +55,9 @@ const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
       <td>
         <RouterLink to={to} title={tag.name}>
           {tag.name}
-          <Created className="has-text-grey is-ellipsis-overflow">
+          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
             {t("tags.overview.created")} <DateFromNow date={tag.date} />
-          </Created>
+          </span>
         </RouterLink>
       </td>
       <td className="is-darker">{deleteButton}</td>
diff --git a/scm-ui/ui-webapp/src/search/Search.tsx b/scm-ui/ui-webapp/src/search/Search.tsx
index 550c18e323..cc1b6ff0ae 100644
--- a/scm-ui/ui-webapp/src/search/Search.tsx
+++ b/scm-ui/ui-webapp/src/search/Search.tsx
@@ -53,7 +53,7 @@ type CountProps = {
 
 const Count: FC<CountProps> = ({ isLoading, isSelected, count }) => {
   if (isLoading) {
-    return <span className={"small-loading-spinner"} />;
+    return <span className="small-loading-spinner" />;
   }
   return (
     <Tag rounded={true} color={isSelected ? "info" : "light"}>
diff --git a/scm-ui/ui-webapp/src/users/components/UserConverter.tsx b/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
index 1f80500550..ee12ba96e0 100644
--- a/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
+++ b/scm-ui/ui-webapp/src/users/components/UserConverter.tsx
@@ -22,24 +22,18 @@
  * SOFTWARE.
  */
 import React, { FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import { User } from "@scm-manager/ui-types";
+import { useConvertToExternal, useConvertToInternal } from "@scm-manager/ui-api";
 import {
   Button,
   ErrorNotification,
   Level,
   Modal,
   PasswordConfirmation,
-  SubmitButton
+  SubmitButton,
 } from "@scm-manager/ui-components";
-import { useTranslation } from "react-i18next";
-import { User } from "@scm-manager/ui-types";
-import styled from "styled-components";
-import { useConvertToExternal, useConvertToInternal } from "@scm-manager/ui-api";
-
-const ExternalDescription = styled.div`
-  display: flex;
-  align-items: center;
-  font-weight: 400;
-`;
 
 type Props = {
   user: User;
@@ -53,12 +47,12 @@ const UserConverter: FC<Props> = ({ user }) => {
   const {
     isLoading: isConvertingToInternal,
     error: convertingToInternalError,
-    convertToInternal
+    convertToInternal,
   } = useConvertToInternal();
   const {
     isLoading: isConvertingToExternal,
     error: convertingToExternalError,
-    convertToExternal
+    convertToExternal,
   } = useConvertToExternal();
   const error = convertingToExternalError || convertingToInternalError || undefined;
   const isLoading = isConvertingToExternal || isConvertingToInternal;
@@ -135,7 +129,9 @@ const UserConverter: FC<Props> = ({ user }) => {
       {showPasswordModal && passwordModal}
       {error && <ErrorNotification error={error} />}
       <div className="columns is-multiline">
-        <ExternalDescription className="column is-half">{getUserExternalDescription()}</ExternalDescription>
+        <div className={classNames("column", "is-half", "is-flex", "is-align-items-center")}>
+          {getUserExternalDescription()}
+        </div>
         <div className="column is-half">
           <Level right={getConvertButton()} />
         </div>
diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyCreatedModal.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyCreatedModal.tsx
index 4b117867d6..c9112052fe 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyCreatedModal.tsx
+++ b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyCreatedModal.tsx
@@ -56,19 +56,19 @@ const ApiKeyCreatedModal: FC<Props> = ({ addedKey, close }) => {
   };
 
   const newPassphraseModalContent = (
-    <div className={"media-content"}>
+    <div className="media-content">
       <p>{t("apiKey.modal.text1")}</p>
       <p>
         <b>{t("apiKey.modal.text2")}</b>
       </p>
       <hr />
-      <div className={"columns"}>
-        <div className={"column is-11"}>
-          <KeyArea wrap={"soft"} ref={keyRef} className={"input"} value={addedKey.token} />
+      <div className="columns">
+        <div className="column is-11">
+          <KeyArea wrap={"soft"} ref={keyRef} className="input" value={addedKey.token} />
         </div>
-        <NoLeftMargin className={"column is-1"}>
+        <NoLeftMargin className="column is-1">
           <Icon
-            className={"is-hidden-mobile fa-2x"}
+            className="is-hidden-mobile fa-2x"
             name={copied ? "clipboard-check" : "clipboard"}
             title={t("apiKey.modal.clipboard")}
             onClick={copy}