@scm-manager/ui-components 2.31.1 → 2.31.2-20220124-105541

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.31.1",
+  "version": "2.31.2-20220124-105541",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.31.1",
+    "@scm-manager/ui-tests": "^2.31.2-20220124-105541",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.31.1",
-    "@scm-manager/ui-extensions": "^2.31.1",
-    "@scm-manager/ui-types": "^2.31.1",
+    "@scm-manager/ui-api": "^2.31.2-20220124-105541",
+    "@scm-manager/ui-extensions": "^2.31.2-20220124-105541",
+    "@scm-manager/ui-types": "^2.31.2-20220124-105541",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Breadcrumb.tsx

@@ -32,6 +32,7 @@ import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensi
 import Icon from "./Icon";
 import Tooltip from "./Tooltip";
 import copyToClipboard from "./CopyToClipboard";
+import { devices } from "./devices";
 
 type Props = {
   repository: Repository;
@@ -51,6 +52,13 @@ const PermaLinkWrapper = styled.span`
   height: 16px;
   font-size: 13px;
 
+  @media screen and (min-width: ${devices.tablet.width}px) {
+    margin-left: 0.25rem;
+  }
+  @media screen and (max-width: ${devices.mobile.width}px) {
+    margin-left: auto;
+  }
+
   i {
     color: #dbdbdb;
     opacity: 0.75;
@@ -64,9 +72,10 @@ const PermaLinkWrapper = styled.span`
 
 const BreadcrumbNav = styled.nav`
   flex: 1;
-  display: flex;
-  align-items: center;
-  width: 100%;
+
+  @media screen and (max-width: ${devices.mobile.width}px) {
+    flex-wrap: wrap;
+  }
 
   /* move slash to end */
   li + li::before {
@@ -198,7 +207,15 @@ const Breadcrumb: FC<Props> = ({
 
     return (
       <BreadcrumbNav
-        className={classNames("breadcrumb", "sources-breadcrumb", "mx-2", "my-4")}
+        className={classNames(
+          "breadcrumb",
+          "sources-breadcrumb",
+          "mx-2",
+          "my-4",
+          "is-flex",
+          "is-align-items-center",
+          "is-full-width"
+        )}
         aria-label="breadcrumbs"
       >
         {prefixButtons}
@@ -214,7 +231,7 @@ const Breadcrumb: FC<Props> = ({
           </li>
           {pathSection()}
         </ul>
-        <PermaLinkWrapper className="ml-1" tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
+        <PermaLinkWrapper tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
           {copying ? (
             <Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
           ) : (
@@ -251,10 +268,20 @@ const Breadcrumb: FC<Props> = ({
 
   return (
     <>
-      <div className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
+      <div
+        className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center", "is-flex-wrap-wrap")}
+      >
         {renderBreadcrumbNav()}
         {
-          <ActionBar className={classNames("is-flex", "is-justify-content-flex-start", "is-align-self-center", "my-2")}>
+          <ActionBar
+            className={classNames(
+              "is-flex",
+              "is-justify-content-flex-start",
+              "is-align-self-center",
+              "m-2",
+              "is-flex-wrap-wrap"
+            )}
+          >
             {renderExtensionPoints()}
           </ActionBar>
         }

package/src/DangerZone.tsx

@@ -23,6 +23,7 @@
  */
 
 import styled from "styled-components";
+import { devices } from "./devices";
 
 export const DangerZone = styled.div`
   border: 1px solid #ff6a88;
@@ -45,6 +46,12 @@ export const DangerZone = styled.div`
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;
   }
+  @media screen and (max-width: ${devices.tablet.width}px) {
+    .button {
+      height: 100%;
+      white-space: break-spaces;
+    }
+  }
 `;
 
 export default DangerZone;