layout improves

Author: Artem Netsvetaev

src/components/BaseRow.vue

@@ -0,0 +1,72 @@
+<template>
+    <div
+        class="base-row noselect"
+        :class="{ clickable }"
+    >
+        <div class="meta">
+            <slot name="meta" />
+        </div>
+        <div class="info">
+            <b class="title">{{ title }}</b>
+            <span class="extra">
+                {{ extra }}
+            </span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        extra: String,
+        clickable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.base-row {
+    display: flex;
+    gap: 24px;
+    padding: 10px 24px;
+    margin-bottom: 16px;
+    align-items: center;
+    border-radius: 20px;
+}
+.base-row:last-child {
+    margin-bottom: 0;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 18px;
+    height: 100%;
+}
+.extra {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.extra:empty {
+    display: none;
+}
+
+.clickable {
+    background: var(--bs-primary-10);
+    transition: background-color 0.5s ease;
+}
+
+.clickable:hover {
+    background: var(--bs-primary-20);
+    cursor: pointer;
+}
+</style>