CAM-1345:Revise Province Tooltip

frontend/src/views/TooltipPopup.vue

@@ -2,9 +2,13 @@
   <div v-show="!isExpanded && region" class="tooltip-overlay">
     <div class="tooltip-panel">
       <button class="close-btn" type="button" @click="$emit('close')">&#x2715;</button>
-      <h3 class="tooltip-title">
-        {{ region.name }}<template v-if="LayerType === 'Domain'"> Domain</template>
-      </h3>
+      <template v-if="LayerType === 'Domain'">
+        <h3 class="tooltip-title">{{ region.name }} Domain</h3>
+      </template>
+      <template v-else>
+        <div class="province-eyebrow">{{ region.province }} &middot; {{ region.type }}</div>
+        <h3 class="tooltip-title">{{ region.name }}</h3>
+      </template>
 
       <p v-if="!isDiagramExpanded" class="description">
         {{ LayerType === 'Domain' ? region.summary : region.characteristics }}
@@ -14,45 +18,60 @@
       </div>
 
       <div class="content-panel">
+        <div v-if="region.image" class="content-panel-header">
+          <button
+            type="button"
+            class="pill-btn full-diagram-btn"
+            @click="isDiagramExpanded = !isDiagramExpanded"
+          >
+            <span class="icon-arrow" aria-hidden="true">{{
+              isDiagramExpanded ? '&#x2197;' : '&#x26F6;'
+            }}</span>
+            {{ isDiagramExpanded ? 'Back' : 'View full diagram' }}
+          </button>
+        </div>
+
+        <div class="content-panel-body">
+          <img
+            v-if="region.image"
+            :src="region.image"
+            :alt="region.name"
+            :class="{
+              'domain-image': LayerType === 'Domain',
+              'province-image': LayerType === 'Province'
+            }"
+          />
+        </div>
+
         <button
-          v-if="LayerType === 'Domain' && region.image"
+          v-if="LayerType === 'Domain' && !isDiagramExpanded"
           type="button"
-          class="pill-btn full-diagram-btn"
-          @click="isDiagramExpanded = !isDiagramExpanded"
+          class="details-btn"
+          @click="isExpanded = true"
         >
-          <span class="icon-arrow" aria-hidden="true">{{
-            isDiagramExpanded ? '&#x2197;' : '&#x26F6;'
-          }}</span>
-          {{ isDiagramExpanded ? 'Back' : 'View full diagram' }}
+          View details
+          <span class="icon-arrow" aria-hidden="true">&#x2192;</span>
         </button>
+      </div>
 
-        <img
-          v-if="region.image"
-          :src="region.image"
-          :alt="region.name"
-          :class="{
-            'domain-image': LayerType === 'Domain',
-            'province-image': LayerType === 'Province'
-          }"
-        />
+      <div class="footer-row">
+        <p class="citation">
+          Diagram: {{ DIAGRAM_CITATION }}<br />
+          <a :href="DIAGRAM_CITATION_URL" target="_blank" rel="noopener">{{
+            DIAGRAM_CITATION_URL
+          }}</a>
+        </p>
 
         <button
-          v-if="LayerType === 'Domain' && !isDiagramExpanded"
+          v-if="LayerType === 'Province' && !isDiagramExpanded"
           type="button"
-          class="details-btn"
+          class="details-btn details-btn-inline"
           @click="isExpanded = true"
         >
           View details
           <span class="icon-arrow" aria-hidden="true">&#x2192;</span>
         </button>
       </div>
-
-      <p v-if="LayerType === 'Domain'" class="citation">
-        Diagram: {{ DIAGRAM_CITATION }}<br />
-        <a :href="DIAGRAM_CITATION_URL" target="_blank" rel="noopener">{{
-          DIAGRAM_CITATION_URL
-        }}</a>
-      </p>
     </div>
   </div>
 
@@ -210,6 +229,16 @@ h3,
   color: #1b2a6b;
 }
 
+.province-eyebrow {
+  flex-shrink: 0;
+  margin-bottom: 4px;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: #4b5563;
+}
+
 .tooltip-panel .description {
   flex-shrink: 0;
   max-height: 130px;
@@ -230,17 +259,28 @@ h3,
   min-height: 0;
   margin-top: 16px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
   background: white;
   border-radius: 12px;
   padding: 20px;
 }
 
+.content-panel-header {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+
+.content-panel-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .pill-btn {
-  position: absolute;
-  top: 16px;
-  right: 16px;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -279,14 +319,27 @@ h3,
   background: #16215a;
 }
 
+.details-btn-inline {
+  position: static;
+  flex-shrink: 0;
+}
+
 .icon-arrow {
   font-size: 14px;
   line-height: 1;
 }
 
-.citation {
+.footer-row {
   flex-shrink: 0;
   margin-top: 12px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.citation {
+  flex-shrink: 0;
   font-size: 11px;
   line-height: 1.5;
   color: #6b7280;