Fix text truncation on frontend, improve buttons

Author: futurGH

frontend/src/components/Button.mlx

@@ -1,21 +1,22 @@
 let base_classes =
   "py-1 px-4 text-lg rounded-lg w-full flex items-center justify-center \
-   transition delay-50 duration-300 focus-visible:outline-none \
-   disabled:text-mist-80"
+   transition duration-300 focus-visible:outline-none disabled:text-mist-80"
 
 type kind = [`Primary | `Secondary | `Tertiary | `Danger]
 
 let classes = function
   | `Primary ->
       base_classes
       ^ " bg-white font-serif text-mana-200 shadow-whisper \
-         hover:shadow-shimmer hover:bg-mist-20 focus-visible:shadow-shimmer \
-         focus-visible:bg-mist-20 active:shadow-glow disabled:bg-mana-40"
+         hover:shadow-shimmer hover:bg-mist-20 hover:text-mist-100 \
+         focus-visible:shadow-shimmer focus-visible:bg-mist-20 \
+         focus-visible:text-mist-100 active:shadow-glow active:text-mana-100 \
+         disabled:bg-mist-60 disabled:shadow-none"
   | `Secondary ->
       base_classes
       ^ " bg-feather font-serif underline text-mana-100 hover:no-underline \
          focus-visible:shadow-whisper active:shadow-whisper \
-         disabled:no-underline disabled:bg-mana-40"
+         disabled:no-underline disabled:bg-mist-60 disabled:shadow-none"
   | `Tertiary ->
       base_classes
       ^ " font-sans underline text-mana-100 hover:no-underline \
@@ -24,7 +25,8 @@ let classes = function
       base_classes
       ^ " bg-white font-serif text-phoenix-100 shadow-bleed hover:bg-mist-20 \
          focus:bg-mist-20 focus:text-phoenix-40 focus-visible:outline-none \
-         active:bg-phoenix-40 active:text-mist-20 disabled:bg-mana-40"
+         active:bg-phoenix-40 active:text-mist-20 disabled:bg-mist-60 \
+         disabled:shadow-none"
   | `Danger_secondary ->
       base_classes
       ^ " bg-feather font-serif underline text-phoenix-100 hover:no-underline \

frontend/src/templates/AccountPermissionsPage.mlx

@@ -67,7 +67,9 @@ let[@react.component] make
     ~props:
       ({current_user; logged_in_users; csrf_token; authorized_apps; devices} :
         props ) () =
-  <div className="w-auto h-full px-4 sm:px-0 pt-16 mx-auto flex flex-col md:flex-row gap-12">
+  <div
+    className="w-auto h-full max-w-full px-4 sm:px-0 pt-16 mx-auto flex \
+               flex-col md:flex-row gap-12">
     <AccountSidebar
       current_user logged_in_users active_page="/account/permissions"
     />
@@ -87,17 +89,24 @@ let[@react.component] make
             <ul className="space-y-2">
               ( List.map
                   (fun (app : authorized_app) ->
+                    let name = Option.value app.client_name ~default:app.client_host in
                     <li key=app.client_id className="flex items-center gap-x-2">
-                      <span className="font-serif text-mana-100">
-                        (string
-                           (Option.value app.client_name
-                              ~default:app.client_host ) )
+                      <span
+                        title=name
+                        className="flex-1 max-w-fit font-serif text-mana-100 \
+                                   truncate">
+                        (string name)
                       </span>
                       ( match app.client_name with
                       | Some _ ->
-                          <span className="text-mist-80">
-                            (string ("(" ^ app.client_host ^ ")"))
-                          </span>
+                          array
+                            [| <span className="text-mist-80">(string "-")</span>
+                             ; <span
+                                 title=app.client_host
+                                 className="flex-2 max-w-fit block \
+                                            text-mist-80 truncate">
+                                 (string app.client_host)
+                               </span> |]
                       | None ->
                           null )
                       <span className="text-mist-80">(string "-")</span>
@@ -112,7 +121,7 @@ let[@react.component] make
                           formMethod="post"
                           name="action"
                           value="revoke_app"
-                          className="text-mist-100 underline \
+                          className="text-mist-100 underline whitespace-nowrap \
                                      hover:text-mana-100">
                           (string "revoke access")
                         </button>
@@ -138,7 +147,7 @@ let[@react.component] make
                     let key = device.last_ip ^ "-" ^ string_of_int i in
                     <li key className="flex flex-col">
                       <div className="flex items-center gap-x-2">
-                        <span className="font-serif text-mana-100">
+                        <span className="font-serif text-mana-100 truncate">
                           (string (parse_user_agent device.last_user_agent))
                         </span>
                         ( if device.is_current then
@@ -165,13 +174,13 @@ let[@react.component] make
                             formMethod="post"
                             name="action"
                             value="sign_out_device"
-                            className="text-mist-100 underline \
+                            className="text-mist-100 underline whitespace-nowrap \
                                        hover:text-mana-100">
                             (string "sign out")
                           </button>
                         </form>
                       </div>
-                      <span className="text-sm text-mist-80">
+                      <span className="text-sm text-mist-80 truncate">
                         (string
                            ( "Last active " ^ device.last_refreshed_at
                            ^ {js| · |js} ^ device.last_ip ) )

frontend/src/templates/Layout.mlx

@@ -1,6 +1,7 @@
 open React
 
-let[@react.component] make ?(title = "Pegasus") ?(children = null) ?(favicon = "/public/favicon.ico") () =
+let[@react.component] make ?(title = "Pegasus") ?(children = null)
+    ?(favicon = "/public/favicon.ico") () =
   <html lang="en">
     <head>
       <meta charSet="utf-8" />
@@ -32,8 +33,6 @@ let[@react.component] make ?(title = "Pegasus") ?(children = null) ?(favicon = "
     </head>
     <body
       className="bg-feather-100 font-sans font-normal text-base tracking-normal">
-      <div id="root" className="flex justify-center min-h-screen">
-        children
-      </div>
+      <div id="root" className="flex justify-center min-h-screen">children</div>
     </body>
   </html>

pegasus/lib/env.ml

@@ -50,8 +50,7 @@ let crawlers =
       | _ ->
           Uri.make ~scheme:"https" ~host:u () )
 
-let favicon_url =
-  getenv_opt "PDS_FAVICON_URL" ~default:"/public/favicon.ico"
+let favicon_url = getenv_opt "PDS_FAVICON_URL" ~default:"/public/favicon.ico"
 
 let dpop_nonce_secret =
   match getenv_opt "PDS_DPOP_NONCE_SECRET" ~default:"" with

public/main.css

@@ -61,7 +61,7 @@
 	--color-mist-100: #4f4f53;
 
 	--shadow-whisper: inset 0 0 1em #97baff8c;
-	--shadow-shimmer: inset 0 0 1em #79a7ed99;
-	--shadow-glow: inset 0 0 2em #2d37ba73;
-	--shadow-bleed: inset 0 0 2em #db4c6466;
+	--shadow-shimmer: inset 0 0 1em #90bbeea6;
+	--shadow-glow: inset 0 0 1.25em #2d37ba80;
+	--shadow-bleed: inset 0 0 1.25em #db4c6473;
 }