Fix wrapping of title and actions in source view (#1569)

The title of a file and the action buttons had to share the space. Now the title takes it needs and the actions move down if necessary. This behavior is similar to the list of files in changeset view (content component).

gradle/changelog/sources_wrapping.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Fix wrapping of title and actions in source view ([#1569](https://github.com/scm-manager/scm-manager/issues/1569))

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -64,12 +64,6 @@ const DiffFilePanel = styled.div`
   ${(props: Collapsible) => (props.collapsed ? "border-bottom: none;" : "")};
 `;
 
-const FlexWrapLevel = styled.div`
-  /* breaks into a second row
-     when buttons and title become too long */
-  flex-wrap: wrap;
-`;
-
 const FullWidthTitleHeader = styled.div`
   max-width: 100%;
 `;
@@ -78,8 +72,7 @@ const TitleWrapper = styled.span`
   margin-left: 0.25rem;
 `;
 
-const ButtonWrapper = styled.div`
+const AlignRight = styled.div`
-  /* align child to right */
   margin-left: auto;
 `;
 
@@ -460,13 +453,13 @@ class DiffFile extends React.Component<Props, State> {
       </MenuContext.Consumer>
     );
     const headerButtons = (
-      <ButtonWrapper className={classNames("level-right", "is-flex")}>
+      <AlignRight className={classNames("level-right", "is-flex")}>
         <ButtonGroup>
           {sideBySideToggle}
           {openInFullscreen}
           {fileControls}
         </ButtonGroup>
-      </ButtonWrapper>
+      </AlignRight>
     );
 
     let errorModal;
@@ -489,7 +482,7 @@ class DiffFile extends React.Component<Props, State> {
       >
         {errorModal}
         <div className="panel-heading">
-          <FlexWrapLevel className="level">
+          <div className={classNames("level", "is-flex-wrap-wrap")}>
             <FullWidthTitleHeader
               className={classNames("level-left", "is-flex", "has-cursor-pointer")}
               onClick={this.toggleCollapse}
@@ -502,7 +495,7 @@ class DiffFile extends React.Component<Props, State> {
               {this.renderChangeTag(file)}
             </FullWidthTitleHeader>
             {headerButtons}
-          </FlexWrapLevel>
+          </div>
         </div>
         {body}
       </DiffFilePanel>

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -55,18 +55,6 @@ const Header = styled.div`
   padding: 0.5em 0.75em;
 `;
 
-const RightMarginIcon = styled(Icon)`
-  margin-right: 0.5em;
-`;
-
-const RightMarginFileButtonAddons = styled(FileButtonAddons)`
-  margin-right: 0.5em;
-`;
-
-const BorderBottom = styled.div`
-  border-bottom: solid 1px #dbdbdb;
-`;
-
 const LighterGreyBackgroundPanelBlock = styled.div`
   background-color: #fbfbfb;
 `;
@@ -75,6 +63,18 @@ const LighterGreyBackgroundTable = styled.table`
   background-color: #fbfbfb;
 `;
 
+const BorderBottom = styled.div`
+  border-bottom: solid 1px #dbdbdb;
+`;
+
+const FullWidthTitleHeader = styled.div`
+  max-width: 100%;
+`;
+
+const AlignRight = styled.div`
+  margin-left: auto;
+`;
+
 const BorderLessDiv = styled.div`
   margin: -1.25rem;
   border: none;
@@ -111,7 +111,8 @@ class Content extends React.Component<Props, State> {
     const icon = collapsed ? "angle-right" : "angle-down";
 
     const selector = file._links.history ? (
-      <RightMarginFileButtonAddons
+      <FileButtonAddons
+        className="mr-2"
         selected={selected}
         showSources={() => this.setState({ selected: "source" })}
         showHistory={() => this.setState({ selected: "history" })}
@@ -120,34 +121,33 @@ class Content extends React.Component<Props, State> {
     ) : null;
 
     return (
-      <span className="has-cursor-pointer">
+      <div className={classNames("level", "is-flex-wrap-wrap")}>
-        <div className={classNames("media", "is-flex", "is-align-items-center")}>
+        <FullWidthTitleHeader
-          <div className={classNames("media-content", "mr-3")} onClick={this.toggleCollapse}>
+          className={classNames("level-left", "is-flex", "has-cursor-pointer", "is-word-break", "mr-2")}
-            <div className="is-word-break">
+          onClick={this.toggleCollapse}
-              <RightMarginIcon className="is-inline" name={`${icon} fa-fw`} color="inherit" />
+        >
-              {file.name}
+          <Icon className={classNames("is-inline", "mr-2")} name={`${icon} fa-fw`} color="inherit" />
-            </div>
+          {file.name}
-          </div>
+        </FullWidthTitleHeader>
-          <div className="buttons is-grouped">
+        <AlignRight className={classNames("level-right", "buttons")}>
-            {selector}
+          {selector}
-            <OpenInFullscreenButton
+          <OpenInFullscreenButton
-              modalTitle={file?.name}
+            modalTitle={file?.name}
-              modalBody={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+            modalBody={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
-              tooltipStyle="htmlTitle"
+            tooltipStyle="htmlTitle"
-            />
+          />
-            <ExtensionPoint
+          <ExtensionPoint
-              name="repos.sources.content.actionbar"
+            name="repos.sources.content.actionbar"
-              props={{
+            props={{
-                repository,
+              repository,
-                file,
+              file,
-                revision,
+              revision,
-                handleExtensionError: this.handleExtensionError
+              handleExtensionError: this.handleExtensionError
-              }}
+            }}
-              renderAll={true}
+            renderAll={true}
-            />
+          />
-          </div>
+        </AlignRight>
-        </div>
+      </div>
-      </span>
     );
   }