Small fixes

Author: GusevPM

components/data/BlocksTimeline/BlocksTimelineTable.vue

@@ -212,7 +212,8 @@ watch(
 								<th><Text size="12" weight="600" color="tertiary">Proposer</Text></th>
 								<th><Text size="12" weight="600" color="tertiary">Txs</Text></th>
 								<th><Text size="12" weight="600" color="tertiary">Blobs</Text></th>
-								<th><Text size="12" weight="600" color="tertiary">Total Fees</Text></th>
+								<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+								<th><Text size="12" weight="600" color="tertiary">Fees</Text></th>
 							</tr>
 						</thead>
 
@@ -294,9 +295,16 @@ watch(
 										</Text>
 									</Flex>
 								</td>
+								<td>
+									<Flex align="center">
+										<Text size="13" weight="600" color="primary">
+											{{ formatBytes(block.stats.bytes_in_block, 0) }}
+										</Text>
+									</Flex>
+								</td>
 								<td>
 									<Flex align="center" gap="4">
-										<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 6 }" :styles="{ amount: { size: '13' } }" />
+										<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 2 }" :styles="{ amount: { size: '13' } }" />
 									</Flex>
 								</td>
 							</tr>
@@ -495,6 +503,10 @@ watch(
 							<Text size="12" weight="600" color="tertiary"> Events</Text>
 							<Text size="12" weight="600" color="secondary"> {{ preview.block.stats.events_count }} </Text>
 						</Flex>
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary"> Block Size </Text>
+							<Text size="12" weight="600" color="secondary"> {{ formatBytes(preview.block.stats.bytes_in_block) }} </Text>
+						</Flex>
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary"> Blobs </Text>
 							<Text size="12" weight="600" color="secondary"> {{ formatBytes(preview.block.stats.blobs_size) }} </Text>
@@ -566,6 +578,7 @@ watch(
 .table {
 	border-radius: 4px 4px 4px 8px;
 	background: var(--card-background);
+	max-width: 604px;
 
 	& table {
 		width: 100%;
@@ -657,6 +670,8 @@ watch(
 	}
 
 	.main {
+		max-height: 690px;
+		overflow-y: auto;
 		flex: 1;
 
 		border-bottom: 1px solid var(--op-5);

components/modules/rollup/RollupOverview.vue

@@ -52,6 +52,13 @@ const activeTab = ref(preselectedTab)
 const isRefetching = ref(false)
 const namespaces = ref([])
 const blobs = ref([])
+const relatedLinks = computed(() => {
+	if (props.rollup.links?.length) {
+		return props.rollup.links[0].split(',')
+	} else {
+		return []
+	}
+})
 
 const page = ref(1)
 const pages = computed(() => (activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1))
@@ -278,6 +285,19 @@ const handleCSVDownload = async (period) => {
 							</Text>
 						</Flex>
 					</Flex>
+					<Flex v-if="relatedLinks.length" direction="column" gap="6">
+						<Text size="12" weight="600" color="secondary">Related Links</Text>
+
+						<Flex align="center" direction="column" gap="2">
+							<Flex v-for="link in relatedLinks" align="center" justify="start" wide>
+								<a :href="link" target="_blank">
+									<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.link">
+										{{ link }}
+									</Text>
+								</a>
+							</Flex>
+						</Flex>
+					</Flex>
 					<Flex align="center" justify="start" gap="12">
 						<Tooltip v-if="rollup.website" position="start" delay="500">
 							<a :href="rollup.website" target="_blank">
@@ -321,11 +341,11 @@ const handleCSVDownload = async (period) => {
 
 						<Tooltip v-if="rollup.explorer" position="start" delay="500">
 							<a :href="rollup.explorer" target="_blank">
-								<Icon name="blockscout" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="search" size="14" color="secondary" :class="$style.btn" />
 							</a>
 
 							<template #content>
-								{{ rollup.explorer }}
+								{{ `Explorer: ${rollup.explorer}` }}
 							</template>
 						</Tooltip>
 					</Flex>
@@ -506,6 +526,16 @@ const handleCSVDownload = async (period) => {
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
+
+	.link {
+		max-width: 352px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.link:hover {
+		color: var(--txt-secondary);
+	}
 }
 
 .txs_wrapper {

pages/blobstream.vue

@@ -506,7 +506,7 @@ getCommitments()
 	padding: 16px 0;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 800px) {
 	.card_wrapper {
 		flex-direction: column;
 	}