Perspective: Improve rendering of very long names

Now, with a very long namespace perspective, always ensure that the
visual slug is visible and clip the namespace on the left side, favoring
the tail end of the namespace: `base.List.NonEmpty` might become
`...List.NonEmpty` rather than `base.List.NonE...`.

Author: hojberg

src/App.elm

@@ -29,6 +29,7 @@ import UI.Click as Click exposing (Click(..))
 import UI.Icon as Icon
 import UI.Modal as Modal
 import UI.Sidebar as Sidebar
+import UI.Size as Size
 import UI.Tooltip as Tooltip
 import UnisonShare.SidebarContent
 import Url exposing (Url)
@@ -504,26 +505,19 @@ viewPerspective env =
         Codebase _ ->
             UI.nothing
 
-        Namespace { codebaseHash, fqn } ->
+        Namespace { fqn } ->
             let
-                fqnText =
-                    FQN.toString fqn
-
-                context =
-                    Env.appContextToString env.appContext
-
-                back =
-                    Tooltip.tooltip
-                        (Button.icon (ChangePerspective (Codebase codebaseHash)) Icon.arrowLeftUp |> Button.small |> Button.uncontained |> Button.view)
-                        (Tooltip.Text ("You're currently viewing a subset of " ++ context ++ " (" ++ fqnText ++ "), click to reveal everything."))
-                        |> Tooltip.withArrow Tooltip.Start
-                        |> Tooltip.view
+                -- Imprecise, but close enough, approximation of overflowing,
+                -- which results in a slight faded left edge A better way would
+                -- be to measure the DOM like we do for overflowing docs, but
+                -- thats quite involved...
+                isOverflowing =
+                    fqn |> FQN.toString |> String.length |> (\l -> l > 20)
             in
             header
-                [ class "perspective" ]
-                [ div [ class "namespace-slug" ] []
-                , h2 [] [ FQN.view fqn ]
-                , back
+                [ classList [ ( "perspective", True ), ( "is-overflowing", isOverflowing ) ] ]
+                [ UI.namespaceSlug
+                , h2 [ class "namespace" ] [ FQN.view fqn ]
                 ]
 
 

src/UI.elm

@@ -66,3 +66,8 @@ divider =
 charWidth : Int -> String
 charWidth numChars =
     String.fromInt numChars ++ "ch"
+
+
+namespaceSlug : Html msg
+namespaceSlug =
+    div [ class "namespace-slug" ] []

src/css/app.css

@@ -192,6 +192,7 @@
   display: flex;
   flex-direction: row;
   position: relative;
+  gap: 0.75rem;
 }
 
 #main-sidebar .perspective:after {
@@ -209,14 +210,34 @@
 }
 
 #main-sidebar .perspective .namespace-slug {
-  margin-right: 0.75rem;
+  position: relative;
 }
 
-#main-sidebar .perspective h2 {
+#main-sidebar .perspective.is-overflowing .namespace-slug:after {
+  position: absolute;
+  top: 0;
+  right: -1.5rem;
+  bottom: 0;
+  content: "";
+  width: 1.5rem;
+  background: linear-gradient(
+    90deg,
+    var(--color-sidebar-bg),
+    var(--color-sidebar-bg),
+    var(--color-sidebar-bg-transparent)
+  );
+}
+
+#main-sidebar .perspective .namespace {
+  display: inline-flex;
   color: var(--color-sidebar-fg-em);
   font-size: 1rem;
   font-weight: 500;
   height: 1.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: right;
+  flex-direction: row-reverse;
 }
 
 #main-sidebar .perspective .tooltip-bubble {

src/css/elements.css

@@ -174,6 +174,7 @@ hr {
 /* Namespace Slug */
 .namespace-slug {
   display: inline-flex;
+  flex: 0 0 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
   background: url(../img/namespace-slug-untitled.svg);