UI Refresh

src/views/Charts/Charts.vue

@@ -1,8 +1,5 @@
 <template>
     <div id="chart" class="x-container">
-        <div class="options-container" style="margin-top: 0">
-            <span class="header">{{ t('view.charts.header') }}</span>
-        </div>
         <el-tabs v-model="activeTab" class="charts-tabs">
             <el-tab-pane :label="t('view.charts.instance_activity.header')" name="instance"></el-tab-pane>
             <el-tab-pane :label="t('view.charts.mutual_friend.tab_label')" name="mutual"></el-tab-pane>
@@ -33,7 +30,7 @@
 </script>
 
 <style scoped>
-    .charts-tabs {
-        margin-bottom: 12px;
+    :deep(.el-tabs__header) {
+        margin: 0;
     }
 </style>

src/views/Charts/components/InstanceActivity.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div ref="instanceActivityRef" class="pt-12">
         <div class="options-container instance-activity" style="margin-top: 0">
             <div>
                 <span>{{ t('view.charts.instance_activity.header') }}</span>
@@ -151,6 +151,33 @@
     const { currentUser } = storeToRefs(useUserStore());
     const { t } = useI18n();
 
+    const instanceActivityRef = ref(null);
+
+    const instanceActivityResizeObserver = new ResizeObserver(() => {
+        setInstanceActivityHeight();
+    });
+
+    function setInstanceActivityHeight() {
+        if (instanceActivityRef.value) {
+            const availableHeight = window.innerHeight - 100;
+            instanceActivityRef.value.style.height = `${availableHeight}px`;
+            instanceActivityRef.value.style.overflowY = 'auto';
+        }
+    }
+
+    onMounted(() => {
+        if (instanceActivityRef.value) {
+            instanceActivityResizeObserver.observe(instanceActivityRef.value);
+        }
+        setInstanceActivityHeight();
+    });
+
+    onBeforeUnmount(() => {
+        if (instanceActivityRef.value) {
+            instanceActivityResizeObserver.unobserve(instanceActivityRef.value);
+        }
+    });
+
     const {
         barWidth,
         isDetailVisible,
@@ -623,7 +650,7 @@
         align-items: center;
         justify-content: center;
         margin-top: 100px;
-        color: #5c5c5c;
+        color: var(--el-text-color-secondary);
     }
     .divider {
         padding: 0 400px;

src/views/Charts/components/MutualFriends.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="mutual-graph">
+    <div class="mutual-graph pt-12" ref="mutualGraphRef">
         <div class="options-container mutual-graph__toolbar">
             <div class="mutual-graph__actions">
                 <el-tooltip :content="t('view.charts.mutual_friend.force_dialog.open_label')" placement="top">
@@ -207,6 +207,20 @@
         return parsed.invalid ? null : parsed.value;
     };
 
+    const mutualGraphRef = ref(null);
+
+    const mutualGraphResizeObserver = new ResizeObserver(() => {
+        setMutualGraphHeight();
+    });
+
+    function setMutualGraphHeight() {
+        if (mutualGraphRef.value) {
+            const availableHeight = window.innerHeight - 100;
+            mutualGraphRef.value.style.height = `${availableHeight}px`;
+            mutualGraphRef.value.style.overflowY = 'auto';
+        }
+    }
+
     onMounted(() => {
         nextTick(() => {
             if (!chartRef.value) {
@@ -215,6 +229,8 @@
             createChartInstance();
             resizeObserver = new ResizeObserver(() => chartInstance?.resize());
             resizeObserver.observe(chartRef.value);
+            mutualGraphResizeObserver.observe(mutualGraphRef.value);
+            setMutualGraphHeight();
         });
     });
 
@@ -227,6 +243,9 @@
             chartInstance.dispose();
             chartInstance = null;
         }
+        if (mutualGraphResizeObserver) {
+            mutualGraphResizeObserver.disconnect();
+        }
     });
 
     watch(
@@ -676,8 +695,8 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        margin-top: 0;
-        margin-bottom: 8px;
+        margin-top: 8px;
+        margin-bottom: 0;
         background: transparent;
         border: none;
         box-shadow: none;