up

src/components/ScreenPreview.vue

@@ -18,8 +18,7 @@ const props = defineProps<{
   isThumbnail?: boolean
 }>()
 
-const teamColumns = computed(() => Math.max(1, Math.ceil(Math.sqrt((props.teamNames?.length ?? 0) / 4))))
-const teamRows = computed(() => Math.max(1, Math.ceil((props.teamNames?.length ?? 0) / teamColumns.value)))
+const teamRows = computed(() => Math.max(1, props.teamNames?.length ?? 0))
 const timerNow = ref(Date.now())
 const timerRemainingAtSync = ref(0)
 const timerSyncedAt = ref(Date.now())
@@ -113,7 +112,14 @@ onUnmounted(() => {
     </div>
     <div v-else-if="state.mode === 'SCREEN_MODE_TEAMS'" class="preview-team-list">
       <p v-if="!teamNames" class="preview-message">Список команд ещё не загружен</p>
-      <div v-else-if="teamNames.length" class="team-names" :style="{ gridTemplateColumns: `repeat(${teamColumns}, minmax(0, 1fr))`, gridTemplateRows: `repeat(${teamRows}, minmax(0, 1fr))`, fontSize: `min(${22.5 / teamRows}cqw, ${5 / teamColumns}cqw)` }">
+      <div
+        v-else-if="teamNames.length"
+        class="team-names"
+        :style="{
+          gridTemplateRows: `repeat(${teamRows}, minmax(0, 1fr))`,
+          fontSize: `min(${22.5 / teamRows}cqw, 5cqw)`,
+        }"
+      >
         <p v-for="(name, index) in teamNames" :key="index">{{ name }}</p>
       </div>
       <p v-else class="preview-message">Команды пока не зарегистрированы</p>
@@ -280,8 +286,8 @@ onUnmounted(() => {
 .team-names {
   align-items: center;
   display: grid;
-  gap: 1.5cqw;
-  grid-auto-flow: column;
+  gap: 0.25em;
+  grid-template-columns: minmax(0, 1fr);
   height: 100%;
 }