Frontend: Optimize page toolbar title styles in src/css/pages.css

Signed-off-by: Michael Mayer <michael@photoprism.app>

Author: lastzero

frontend/src/component/album/toolbar.vue

@@ -13,14 +13,16 @@
       class="page-toolbar"
       color="secondary"
     >
-      <v-toolbar-title :title="album.Title" class="flex-grow-1">
-        <span class="hidden-xs">
+      <v-toolbar-title :title="album.Title" class="page__title">
+        <span v-if="$vuetify.display.smAndUp">
           <router-link :to="{ name: collectionRoute }">
             {{ T(collectionTitle) }}
           </router-link>
-          <v-icon>{{ navIcon }}</v-icon>
+          <v-icon :icon="navIcon"></v-icon>
+        </span>
+        <span class="clickable" @click.stop="$router.push({ name: collectionRoute })">
+          {{ album.Title }}
         </span>
-        {{ album.Title }}
       </v-toolbar-title>
 
       <v-btn-toggle

frontend/src/css/pages.css

@@ -24,6 +24,25 @@
     padding: 30vh 24px;
 }
 
+.p-page .v-toolbar-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.125rem;
+    font-weight: 500;
+    letter-spacing: 0;
+    line-height: 1.25rem;
+}
+
+.p-page .page__title {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: start;
+    flex-wrap: nowrap;
+}
+
 .p-page-about {
     line-height: 1.5rem;
 }