Add graph fullscreen mode, collapsible panels, and relation row styling.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/views/ContactDetailView.vue

@@ -69,10 +69,12 @@
               @click="openEditRelation(rel)"
             >
               <div class="relation-row__body">
-                <span style="font-weight:500;">{{ otherContactName(rel) }}</span>
-                <span :class="`badge badge-${rel.relation_type}`" style="margin-left:8px;">{{ relLabel(rel.relation_type) }}</span>
-                <span class="text-muted" style="margin-left:8px;font-size:12px;">{{ intensityLabel(rel.interaction_intensity) }}</span>
-                <div v-if="rel.description" class="text-muted mt-1">{{ rel.description }}</div>
+                <div class="relation-row__main">
+                  <span class="relation-row__name">{{ otherContactName(rel) }}</span>
+                  <span :class="`badge badge-${rel.relation_type}`">{{ relLabel(rel.relation_type) }}</span>
+                  <span class="relation-row__intensity">{{ intensityLabel(rel.interaction_intensity) }}</span>
+                </div>
+                <div v-if="rel.description" class="relation-row__desc">{{ rel.description }}</div>
               </div>
               <div class="relation-row__actions" @click.stop>
                 <button class="btn btn-secondary btn-sm" type="button" @click="openEditRelation(rel)">
@@ -155,6 +157,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useContactsStore } from '../stores/contacts'
+import { useNetworkMapsStore } from '../stores/networkMaps'
 import ContactForm from '../components/ContactForm.vue'
 import EditRelationModal from '../components/EditRelationModal.vue'
 import SearchableSelect from '../components/SearchableSelect.vue'
@@ -282,7 +285,85 @@ onMounted(async () => {
   await mapsStore.fetchMaps()
   await loadContact()
   await Promise.all([store.fetchContacts(), store.fetchRelations()])
-  const rt = await store.fetchRelationTypes()
+  const [rt, intensities] = await Promise.all([
+    store.fetchRelationTypes(),
+    store.fetchNetworkMapChoices(),
+  ])
   relationTypes.value = rt
+  interactionIntensities.value = intensities?.interaction_intensities || []
 })
 </script>
+
+<style scoped>
+.relations-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.relation-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.relation-row:last-child {
+  border-bottom: none;
+}
+
+.relation-row:hover {
+  background: var(--surface-alt);
+  margin: 0 -12px;
+  padding: 10px 12px;
+  border-radius: var(--radius);
+}
+
+.relation-row.is-selected {
+  background: var(--accent-dim);
+  margin: 0 -12px;
+  padding: 10px 12px;
+  border-radius: var(--radius);
+}
+
+.relation-row__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.relation-row__main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.relation-row__name {
+  font-weight: 500;
+}
+
+.relation-row__intensity {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.relation-row__desc {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.relation-row__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.map-link {
+  display: inline-block;
+  margin-right: 8px;
+}
+</style>