From 9fc8f954e35fc53b403e8593aa12d6c09f95ca61 Mon Sep 17 00:00:00 2001
From: opti1337 <nikita.kruglickiy@gmail.com>
Date: Thu, 29 Jan 2026 23:18:47 +0600
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D1=8B=D0=B9-=D1=81=D1=82?=
 =?UTF-8?q?=D0=B0=D1=80=D1=8B=D0=B9=20clientrow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/components/ClientRow.vue     | 43 ++++++++++++++++---------
 client/app/composables/use-mediasoup.ts |  2 +-
 client/app/layouts/default.vue          |  2 +-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/client/app/components/ClientRow.vue b/client/app/components/ClientRow.vue
index f7c5f4c..174031b 100644
--- a/client/app/components/ClientRow.vue
+++ b/client/app/components/ClientRow.vue
@@ -6,23 +6,28 @@
       'bg-surface-800': expanded,
     }"
   >
-    <div class="p-3 flex items-center gap-3" @click="toggleExpand">
-      <PrimeAvatar
-        size="small"
-        :class="{
-          'outline-1 outline-primary outline-offset-2': speaking,
-        }"
-      >
-        <template #icon>
-          <User :size="20" />
-        </template>
-      </PrimeAvatar>
+    <div class="p-3" @click="toggleExpand">
+      <div class="flex items-center gap-3">
+        <PrimeAvatar
+          size="small"
+          class="shrink-0"
+          :class="{
+            'outline-1 outline-primary outline-offset-2': speaking,
+          }"
+        >
+          <template #icon>
+            <User :size="20" />
+          </template>
+        </PrimeAvatar>
 
-      <div class="flex-1 overflow-hidden text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-        {{ client.displayName || client.username }}
+        <p class="flex-1 text-sm leading-5 font-medium text-color truncate w-0">
+          {{ client.displayName || client.username }}
+        </p>
+
+        <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
       </div>
 
-      <div class="flex align-center gap-1">
+      <div v-if="hasBadges" class="flex justify-end align-center gap-1 mt-2">
         <PrimeBadge v-if="!!shareConsumer" v-tooltip.top="'Watch'" severity="success" value="Streaming" size="small" @click.stop="watchStream" />
 
         <PrimeBadge v-if="premuted" severity="danger" value="Muted" size="small" />
@@ -31,8 +36,6 @@
 
         <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
       </div>
-
-      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
     </div>
 
     <CollapseTransition v-if="!isMe">
@@ -112,6 +115,14 @@ const inputMuted = computed(() => {
   return premuted.value || audioConsumerPaused.value
 })
 
+const hasBadges = computed(() => {
+  return !!shareConsumer.value
+    || premuted.value
+    || inputMuted.value
+    || props.client.outputMuted
+    || isMe.value
+})
+
 watch(allConsumers, () => {
   audioConsumerPaused.value = audioConsumer.value?.paused ?? false
 })
diff --git a/client/app/composables/use-mediasoup.ts b/client/app/composables/use-mediasoup.ts
index 8314ee9..6e3ac3d 100644
--- a/client/app/composables/use-mediasoup.ts
+++ b/client/app/composables/use-mediasoup.ts
@@ -335,7 +335,7 @@ export const useMediasoup = createSharedComposable(() => {
     await enableProducer('share', {
       track,
       codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/h264',
+        c => c.mimeType.toLowerCase() === 'video/AV1',
       ),
       codecOptions: {
         videoGoogleStartBitrate: 1000,
diff --git a/client/app/layouts/default.vue b/client/app/layouts/default.vue
index bdf9e33..be52c2e 100644
--- a/client/app/layouts/default.vue
+++ b/client/app/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr]">
+  <div class="grid grid-cols-[1fr_1.25fr] gap-2 p-2 h-screen grid-rows-[auto_1fr] max-w-full">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >