screen sharing

client/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-2 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]">
     <div
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >
@@ -45,8 +45,8 @@
     </div>
 
     <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
-      <div v-auto-animate class="p-3 divide-y divide-surface-800">
-        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      <div v-auto-animate class="p-3 space-y-1">
+        <ClientRow v-for="client of clients" :key="client.userId" :client="client" />
       </div>
     </PrimeScrollPanel>
 
@@ -71,7 +71,17 @@ import {
   VolumeOff,
 } from 'lucide-vue-next'
 
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri, sharingEnabled, toggleShare } = useApp()
+const {
+  isTauri,
+  version,
+  clients,
+  inputMuted,
+  outputMuted,
+  sharingEnabled,
+  toggleInput,
+  toggleOutput,
+  toggleShare,
+} = useApp()
 const { connect, connected } = useSignaling()
 
 interface Tab {