From b5ffc1155a6bf038b9fa5ac79c133453bc68f9ee Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Thu, 7 Mar 2024 18:05:17 +0100
Subject: [PATCH] Updates from Benjamin (#2106)

---
 packages/frontend-2/app.vue                   |  2 +-
 .../common/EditableTitleDescription.vue       |  8 ++-----
 .../project/model-page/Versions.vue           |  2 +-
 .../project/page/discussions/Header.vue       |  2 +-
 .../components/project/page/models/Header.vue |  2 +-
 .../projects/ProjectDashboardCard.vue         |  2 +-
 .../components/viewer/PreSetupWrapper.vue     |  2 +-
 .../frontend-2/pages/projects/[id]/index.vue  | 16 +++++---------
 .../src/components/layout/PageTabs.vue        | 22 ++++++-------------
 9 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/packages/frontend-2/app.vue b/packages/frontend-2/app.vue
index 1e06bffd8..dd0f42f67 100644
--- a/packages/frontend-2/app.vue
+++ b/packages/frontend-2/app.vue
@@ -25,7 +25,7 @@ useHead({
   },
   bodyAttrs: {
     class:
-      'simple-scrollbar bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent'
+      'simple-scrollbar overflow-y-scroll has-[.viewer]:overflow-auto bg-foundation-page text-foreground has-[.viewer-transparent]:!bg-transparent'
   }
 })
 
diff --git a/packages/frontend-2/components/common/EditableTitleDescription.vue b/packages/frontend-2/components/common/EditableTitleDescription.vue
index a9317660a..95f699544 100644
--- a/packages/frontend-2/components/common/EditableTitleDescription.vue
+++ b/packages/frontend-2/components/common/EditableTitleDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-8">
+  <div>
     <!-- Editable Title -->
     <div class="flex group">
       <label class="max-w-full overflow-hidden">
@@ -32,10 +32,7 @@
     </div>
 
     <!-- Editable Description -->
-    <div class="mt-3 flex gap-x-2 group">
-      <div class="hidden md:inline-block shrink-0 text-foreground-2 mt-0.5">
-        <InformationCircleIcon class="w-5 h-5" />
-      </div>
+    <div class="flex gap-x-2 group">
       <label>
         <div class="sr-only">Edit description</div>
         <div
@@ -76,7 +73,6 @@
 
 <script setup lang="ts">
 import { PencilIcon } from '@heroicons/vue/20/solid'
-import { InformationCircleIcon } from '@heroicons/vue/24/outline'
 import { debounce } from 'lodash-es'
 
 const props = defineProps({
diff --git a/packages/frontend-2/components/project/model-page/Versions.vue b/packages/frontend-2/components/project/model-page/Versions.vue
index ff9a0f5a4..01cfe232b 100644
--- a/packages/frontend-2/components/project/model-page/Versions.vue
+++ b/packages/frontend-2/components/project/model-page/Versions.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="block h4 font-bold mb-4">Versions</h1>
+    <h1 class="block h4 font-bold my-4">Versions</h1>
     <div
       v-if="selectedItems.length"
       class="flex flex-col space-y-2 sm:space-y-0 sm:flex-row sm:justify-between sm:items-center"
diff --git a/packages/frontend-2/components/project/page/discussions/Header.vue b/packages/frontend-2/components/project/page/discussions/Header.vue
index c9d7060d2..ed1bf441a 100644
--- a/packages/frontend-2/components/project/page/discussions/Header.vue
+++ b/packages/frontend-2/components/project/page/discussions/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex justify-between items-center mb-4">
+    <div class="flex justify-between items-center mb-8">
       <h1 class="block h4 font-bold">Discussions</h1>
       <div class="space-x-2 flex items-center">
         <FormCheckbox
diff --git a/packages/frontend-2/components/project/page/models/Header.vue b/packages/frontend-2/components/project/page/models/Header.vue
index 4174819a3..971cc5685 100644
--- a/packages/frontend-2/components/project/page/models/Header.vue
+++ b/packages/frontend-2/components/project/page/models/Header.vue
@@ -4,7 +4,7 @@
       class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:justify-between lg:items-center mb-4"
     >
       <div class="flex justify-between items-center flex-wrap sm:flex-nowrap">
-        <h1 class="block h4 font-bold">All Models</h1>
+        <h1 class="block h4 font-bold">Models</h1>
         <div class="flex items-center space-x-2 w-full mt-2 sm:w-auto sm:mt-0">
           <FormButton
             color="secondary"
diff --git a/packages/frontend-2/components/projects/ProjectDashboardCard.vue b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
index a7208d392..3784fd219 100644
--- a/packages/frontend-2/components/projects/ProjectDashboardCard.vue
+++ b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="relative group flex flex-col md:flex-row md:space-x-2 border-2 border-primary-muted hover:bg-primary-muted rounded-md p-3 transition overflow-hidden"
+      class="relative group flex flex-col items-start md:flex-row md:space-x-2 border-2 border-primary-muted hover:bg-primary-muted rounded-md p-3 transition overflow-hidden"
     >
       <div
         class="w-full md:w-48 flex flex-col col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1"
diff --git a/packages/frontend-2/components/viewer/PreSetupWrapper.vue b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
index 0b5146c77..a1193a290 100644
--- a/packages/frontend-2/components/viewer/PreSetupWrapper.vue
+++ b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
@@ -23,7 +23,7 @@
           </div>
           <!-- Viewer host -->
           <div
-            class="special-gradient absolute z-10 overflow-hidden w-screen"
+            class="viewer special-gradient absolute z-10 overflow-hidden w-screen"
             :class="
               isEmbedEnabled
                 ? isTransparent
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index 7fd325ac7..a42a7529e 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -7,20 +7,14 @@
         :auto-accept="shouldAutoAcceptInvite"
         @processed="onInviteAccepted"
       />
-      <!-- Heading text w/ actions -->
-      <ProjectPageHeader :project="project" />
-      <!-- Stats blocks -->
-      <div class="flex flex-col md:flex-row space-y-2 md:space-x-4 mt-8 mb-14">
+      <div
+        class="flex flex-col md:flex-row md:justify-between md:items-start gap-8 sm:gap-4 my-8"
+      >
+        <ProjectPageHeader :project="project" />
         <ProjectPageStatsBlockSettings
           :project="project"
-          class="w-full md:w-72 transition"
+          class="w-full md:w-72 shrink-0"
         />
-        <div class="grow hidden md:flex"></div>
-        <div class="grid grid-cols-3 gap-2">
-          <ProjectPageStatsBlockVersions :project="project" />
-          <ProjectPageStatsBlockModels :project="project" />
-          <ProjectPageStatsBlockComments :project="project" />
-        </div>
       </div>
     </template>
     <!-- No v-if=project to ensure internal queries trigger ASAP -->
diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue
index 09660479a..91e676512 100644
--- a/packages/ui-components/src/components/layout/PageTabs.vue
+++ b/packages/ui-components/src/components/layout/PageTabs.vue
@@ -25,7 +25,7 @@
         ref="buttonContainer"
         class="flex"
         :class="
-          vertical ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-4' : 'gap-8'
+          vertical ? 'flex-wrap sm:flex-nowrap flex-row sm:flex-col gap-4' : 'gap-6'
         "
       >
         <h1
@@ -39,7 +39,7 @@
           v-for="item in items"
           :key="item.id"
           :data-tab-id="item.id"
-          class="tab-button relative z-10 flex items-center gap-1.5 pb-2 border-b-[2px] border-transparent text-sm sm:text-base max-w-max"
+          class="tab-button relative z-10 flex items-center gap-1.5 pb-2 border-b-[2px] border-transparent text-base max-w-max px-2"
           :class="[
             activeItem.id === item.id
               ? 'text-primary hover:text-primary'
@@ -53,25 +53,17 @@
             v-if="item.icon"
             class="shrink-0 h-4 w-4 stroke-[2px]"
           />
-          <div class="relative">
-            <!-- Transparent item to stop layout shift when font-bold is added -->
-            <span class="font-bold opacity-0">{{ item.title }}</span>
-            <span class="absolute inset-0">{{ item.title }}</span>
-          </div>
+          <span class="min-w-6">{{ item.title }}</span>
           <div
             v-if="item.count"
-            class="rounded-full px-2 text-[11px]"
+            class="rounded-full px-2 text-[11px] transition-all min-w-6"
             :class="
               activeItem.id === item.id
-                ? 'text-primary-focus bg-blue-100'
-                : 'text-foreground-2 bg-gray-200'
+                ? 'text-primary bg-blue-100'
+                : 'text-foreground-2 bg-gray-200 dark:bg-foundation'
             "
           >
-            <div class="relative">
-              <!-- Transparent item to stop layout shift when font-bold is added -->
-              <span class="font-bold opacity-0">{{ item.count }}</span>
-              <span class="absolute inset-0 select-none">{{ item.count }}</span>
-            </div>
+            <span>{{ item.count }}</span>
           </div>
           <div
             v-if="item.tag"