corrected sizing problems and page breaks on mobile pages

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import type { Changeset, Repository } from "@scm-manager/ui-types";
-import {Button, ButtonAddons} from "../../buttons";
+import { ButtonAddons, Button } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
 import { translate } from "react-i18next";
 
@@ -21,7 +21,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
     const sourcesLink = createSourcesLink(repository, changeset);
 
     return (
-      <ButtonAddons className="level-item">
+      <ButtonAddons className="is-marginless">
         <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetRow.js

@@ -9,7 +9,7 @@ import injectSheet from "react-jss";
 import { DateFromNow } from "../..";
 import ChangesetAuthor from "./ChangesetAuthor";
 import { parseDescription } from "./changesets";
-import {AvatarImage, AvatarWrapper} from "../../avatar";
+import { AvatarWrapper, AvatarImage } from "../../avatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
@@ -26,21 +26,22 @@ const styles = {
   },
   avatarFigure: {
     marginTop: ".25rem",
-    marginRight: ".5rem",
+    marginRight: ".5rem"
   },
   avatarImage: {
     height: "35px",
     width: "35px"
   },
-  isVcentered: {
-    marginTop: "auto",
-    marginBottom: "auto"
-  },
   metadata: {
     marginLeft: 0
   },
-  tag: {
-    marginTop: ".5rem"
+  isVcentered: {
+    alignSelf: "center"
+  },
+  flexVcenter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
   }
 };
 
@@ -65,9 +66,10 @@ class ChangesetRow extends React.Component<Props> {
 
     return (
       <div className={classes.changeset}>
-        <div className="columns">
+        <div className="columns is-gapless is-mobile">
           <div className="column is-three-fifths">
-
+            <div className="columns is-gapless">
+              <div className="column is-four-fifths">
                 <h4 className="has-text-weight-bold is-ellipsis-overflow">
                   <ExtensionPoint
                     name="changeset.description"
@@ -77,17 +79,18 @@ class ChangesetRow extends React.Component<Props> {
                     {description.title}
                   </ExtensionPoint>
                 </h4>
-
                 <div className="media">
                   <AvatarWrapper>
-                <figure className={classNames(classes.avatarFigure, "media-left")}>
+                    <figure
+                      className={classNames(classes.avatarFigure, "media-left")}
+                    >
                       <div className={classNames("image", classes.avatarImage)}>
                         <AvatarImage person={changeset.author} />
                       </div>
                     </figure>
                   </AvatarWrapper>
                   <div className={classNames(classes.metadata, "media-right")}>
-                <p className="is-hidden-mobile is-hidden-tablet-only">
+                    <p className="is-hidden-touch">
                       <Interpolate
                         i18nKey="changeset.summary"
                         id={changesetId}
@@ -106,13 +109,17 @@ class ChangesetRow extends React.Component<Props> {
                     </p>
                   </div>
                 </div>
-
               </div>
               <div className={classNames("column", classes.isVcentered)}>
                 <ChangesetTags changeset={changeset} />
-            <div className="is-pulled-right level">
-              <ChangesetButtonGroup repository={repository} changeset={changeset} />
-              <div className={classes.isVcentered}>
+              </div>
+            </div>
+          </div>
+          <div className={classNames("column", classes.flexVcenter)}>
+            <ChangesetButtonGroup
+              repository={repository}
+              changeset={changeset}
+            />
             <ExtensionPoint
               name="changeset.right"
               props={{ repository, changeset }}
@@ -121,8 +128,6 @@ class ChangesetRow extends React.Component<Props> {
           </div>
         </div>
       </div>
-        </div>
-      </div>
     );
   }
 }

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js

@@ -4,9 +4,6 @@ import injectSheet from "react-jss";
 import classNames from "classnames";
 
 const styles = {
-  tag: {
-    marginTop: ".5rem"
-  },
   spacing: {
     marginRight: ".25rem"
   }
@@ -24,7 +21,7 @@ class ChangesetTagBase extends React.Component<Props> {
   render() {
     const { icon, label, classes } = this.props;
     return (
-      <span className={classNames(classes.tag, "tag", "is-info")}>
+      <span className={classNames("tag", "is-info")}>
         <span className={classNames("fa", icon, classes.spacing)} /> {label}
       </span>
     );