up

src/components/SceneView.vue

@@ -32,8 +32,7 @@ const props = withDefaults(defineProps<{
   introTime: '',
   animatedResults: false,
 })
-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 failedImages = reactive(new Set<string>())
 watch(() => [props.imageVersion, props.catalog.cover, props.catalog.background], () => failedImages.clear(), { flush: 'sync' })
 function imageURL(url: string, version: string) {
@@ -105,7 +104,14 @@ function imageURL(url: string, version: string) {
       </section>
       <section v-else-if="mode === 10" class="teams-scene" aria-label="Список команд">
         <p v-if="!teamNames" class="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(calc(var(--scene-vh) * ${40 / teamRows}), calc(var(--scene-vw) * ${5 / teamColumns}))` }">
+        <div
+        v-else-if="teamNames.length"
+        class="team-names"
+        :style="{
+          gridTemplateRows: `repeat(${teamRows}, minmax(0, 1fr))`,
+          fontSize: `min(calc(var(--scene-vh) * ${40 / teamRows}), calc(var(--scene-vw) * 5))`,
+        }"
+      >
           <p v-for="(name, index) in teamNames" :key="index">{{ name }}</p>
         </div>
         <p v-else class="message">Команды пока не зарегистрированы</p>
@@ -241,8 +247,8 @@ function imageURL(url: string, version: string) {
 .team-names {
   align-items: center;
   display: grid;
-  gap: calc(var(--scene-vw) * 1.5);
-  grid-auto-flow: column;
+  gap: 0.25em;
+  grid-template-columns: minmax(0, 1fr);
   height: 100%;
 }