Improve mobile contribution page title

Author: hojberg

src/UnisonShare/Page/ProjectContributionPage.elm

@@ -345,14 +345,16 @@ detailedPageTitle appContext contribution =
             , div [ class "page-title_description" ]
                 [ span
                     [ class "from-to" ]
-                    [ text "from"
-                    , span [ class "branches" ]
-                        [ BranchRef.toTag contribution.sourceBranchRef
+                    [ span [ class "branch" ]
+                        [ text "from"
+                        , BranchRef.toTag contribution.sourceBranchRef
                             |> Tag.withClick (Link.projectBranchRoot contribution.projectRef contribution.sourceBranchRef)
                             |> Tag.large
                             |> Tag.view
                         , CopyOnClick.copyButton (BranchRef.toString contribution.sourceBranchRef)
-                        , text "to"
+                        ]
+                    , span [ class "branch" ]
+                        [ text "to"
                         , BranchRef.toTag contribution.targetBranchRef
                             |> Tag.withClick (Link.projectBranchRoot contribution.projectRef contribution.targetBranchRef)
                             |> Tag.large

src/css/unison-share/page/project-contribution-page.css

@@ -59,7 +59,7 @@
       text-transform: capitalize;
     }
 
-    & .branches {
+    & .branch {
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -108,17 +108,26 @@
     & .page-title {
       flex: 1;
 
-      & .page-title_default-title .text {
-        gap: 0.5rem;
+      & h1 {
+        font-size: 1.25rem;
       }
     }
 
-    & .page-title_description {
+    & .page-title_description .from-to {
       flex-direction: column;
       align-items: flex-start;
-      gap: 0.75rem;
+      gap: 0.25rem;
+
+      & .branch {
+        gap: 0.25rem;
+
+        & .copy-on-click {
+          display: none;
+        }
+      }
     }
 
+
     & .page-title_right-side {
       align-self: flex-end;
     }