From 5fd18282073e6991a8a890f6f44308645d74d5bb Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 09:53:35 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix:=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/QallView.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 38c007b006..838088eb14 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -341,7 +341,15 @@ const showShareScreenSettingDetail = ref(false)
 }
 
 .TrackContainer {
-  height: fit-content;
+  position: absolute;
+  bottom: 24px; // 仮置き，メッセージの表示非表示に動的対応
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
 }
 
 .channelView {

From 1cb67d42ca056214451434c1ae62fc0326ffa0f2 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 10:55:38 +0900
Subject: [PATCH 2/7] =?UTF-8?q?wip:=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=83=AA=E3=82=B9=E3=83=88=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=81=8C?=
 =?UTF-8?q?=E5=B4=A9=E3=82=8C=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=82=92?=
 =?UTF-8?q?=E7=84=A1=E7=90=86=E3=82=84=E3=82=8A=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/QallView.vue |  9 ++-------
 src/components/Main/MainView/QallView/UserList.vue | 13 ++++++++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 838088eb14..8b70d10ad9 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -193,7 +193,7 @@ const showShareScreenSettingDetail = ref(false)
       />
       <UserList />
 
-      <div :class="$style.TrackContainer">
+      <div :class="$style.controlBarContainer">
         <div :class="$style.controlBar">
           <div :class="$style.smallButtonGroup">
             <div :class="$style.soundBoardButton">
@@ -340,16 +340,11 @@ const showShareScreenSettingDetail = ref(false)
   border-radius: 8px;
 }
 
-.TrackContainer {
+.controlBarContainer {
   position: absolute;
   bottom: 24px; // 仮置き，メッセージの表示非表示に動的対応
   left: 50%;
   transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
 }
 
 .channelView {
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 73078e732f..01e46b66d9 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -89,8 +89,11 @@ const selectedSid = ref<string>()
 
 <style lang="scss" module>
 .TrackContainer {
+  position: absolute;
+  bottom: calc(100px + 24px);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-
   justify-content: center;
   align-items: center;
   gap: 8px;
@@ -101,7 +104,11 @@ const selectedSid = ref<string>()
   width: 192px;
 }
 .largeCard {
-  height: 50%;
-  width: 66%;
+  height: 69%;
+  width: 92%;
+  position: absolute;
+  bottom: calc(300px + 24px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 </style>

From 4613ed4c29bdff6461209fe5be4bd49586475a5c Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 11:29:07 +0900
Subject: [PATCH 3/7] =?UTF-8?q?wip:=E6=8B=A1=E5=A4=A7=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=AE=E8=A7=A3=E9=99=A4=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/UserList.vue       | 78 +++++++++++++++----
 1 file changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 01e46b66d9..d29068a23b 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -15,6 +15,7 @@ onMounted(async () => {
 })
 const selectedVideoInput = ref<MediaDeviceInfo>()
 const selectedSid = ref<string>()
+const showAllTracks = ref(false)
 </script>
 
 <template>
@@ -47,23 +48,57 @@ const selectedSid = ref<string>()
       "
       :track-info="selectedTrack"
     />
+    <div :class="$style.TrackContainer">
+      <template v-for="([sid, track], index) in tracksMap.entries()" :key="sid">
+        <div
+          v-if="index < 5"
+          :class="$style.card"
+          @click="[selectedTrack, selectedSid] = [track, sid]"
+        >
+          <VideoComponent
+            v-if="
+              track.trackPublication?.kind === 'video' &&
+              !screenShareTrackSidMap.has(sid)
+            "
+            :track-info="track"
+          />
+          <ScreenShareComponent
+            v-else-if="track.trackPublication?.kind === 'video'"
+            :track-info="track"
+            :audio-track-info="
+              tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+            "
+          />
+          <UserCard
+            v-else-if="
+              track.trackPublication?.kind === 'audio' &&
+              !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
+            "
+            :track-info="track"
+          />
+        </div>
+      </template>
+      <div v-if="tracksMap.size > 5" :class="$style.card">
+        <button @click="showAllTracks = true">+{{ tracksMap.size - 5 }}</button>
+      </div>
+    </div>
   </div>
-  <div :class="$style.TrackContainer">
+
+  <div v-else :class="$style.gridContainer">
     <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
       <div
         v-if="
           track.trackPublication?.kind === 'video' &&
           !screenShareTrackSidMap.has(sid)
         "
-        :class="$style.card"
+        :class="$style.smallCard"
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
         <VideoComponent :track-info="track" />
       </div>
-
       <div
         v-else-if="track.trackPublication?.kind === 'video'"
-        :class="$style.card"
+        :class="$style.smallCard"
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
         <ScreenShareComponent
@@ -78,7 +113,7 @@ const selectedSid = ref<string>()
           track.trackPublication?.kind === 'audio' &&
           !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
         "
-        :class="$style.card"
+        :class="$style.smallCard"
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
         <UserCard :track-info="track" />
@@ -88,6 +123,30 @@ const selectedSid = ref<string>()
 </template>
 
 <style lang="scss" module>
+.largeCard {
+  height: 69%;
+  width: 92%;
+  position: absolute;
+  bottom: calc(300px + 24px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(5, 192px);
+  grid-auto-rows: 108px;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
+  margin: 0 auto;
+}
+
+.smallCard {
+  height: 108px;
+  width: 192px;
+}
+
 .TrackContainer {
   position: absolute;
   bottom: calc(100px + 24px);
@@ -99,16 +158,9 @@ const selectedSid = ref<string>()
   gap: 8px;
   align-self: stretch;
 }
+
 .card {
   height: 108px;
   width: 192px;
 }
-.largeCard {
-  height: 69%;
-  width: 92%;
-  position: absolute;
-  bottom: calc(300px + 24px);
-  left: 50%;
-  transform: translateX(-50%);
-}
 </style>

From f1d552d014e18a5e7be69d2c7e1d90091547ebc6 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 12:11:12 +0900
Subject: [PATCH 4/7] =?UTF-8?q?wip:=20absolute=E3=82=92=E7=94=A8=E3=81=84?=
 =?UTF-8?q?=E3=81=BE=E3=81=8F=E3=81=A3=E3=81=9F=E6=9C=80=E6=82=AA=E3=81=AA?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E6=8C=87=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/UserList.vue       | 74 +++++++++++--------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index d29068a23b..75f488c88f 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -22,33 +22,36 @@ const showAllTracks = ref(false)
   <div
     v-if="selectedTrack !== undefined"
     :key="selectedTrack.trackPublication?.trackSid"
-    :class="$style.largeCard"
+    :class="$style.parentContainer"
   >
-    <VideoComponent
-      v-if="
-        selectedTrack.trackPublication?.kind === 'video' &&
-        !screenShareTrackSidMap.has(selectedSid ?? '')
-      "
-      :track-info="selectedTrack"
-    />
-    <ScreenShareComponent
-      v-else-if="selectedTrack.trackPublication?.kind === 'video'"
-      :track-info="selectedTrack"
-      :audio-track-info="
-        tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
-      "
-      not-mute
-    />
-    <UserCard
-      v-else-if="
-        selectedTrack.trackPublication?.kind === 'audio' &&
-        !screenShareTrackSidMap
-          .values()
-          ?.some?.(valueSid => valueSid === selectedSid)
-      "
-      :track-info="selectedTrack"
-    />
-    <div :class="$style.TrackContainer">
+    <div :class="$style.largeCard">
+      <VideoComponent
+        v-if="
+          selectedTrack.trackPublication?.kind === 'video' &&
+          !screenShareTrackSidMap.has(selectedSid ?? '')
+        "
+        :track-info="selectedTrack"
+      />
+      <ScreenShareComponent
+        v-else-if="selectedTrack.trackPublication?.kind === 'video'"
+        :track-info="selectedTrack"
+        :audio-track-info="
+          tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
+        "
+        not-mute
+      />
+      <UserCard
+        v-else-if="
+          selectedTrack.trackPublication?.kind === 'audio' &&
+          !screenShareTrackSidMap
+            .values()
+            ?.some?.(valueSid => valueSid === selectedSid)
+        "
+        :track-info="selectedTrack"
+      />
+    </div>
+
+    <div :class="$style.SuViewContainer">
       <template v-for="([sid, track], index) in tracksMap.entries()" :key="sid">
         <div
           v-if="index < 5"
@@ -79,7 +82,9 @@ const showAllTracks = ref(false)
         </div>
       </template>
       <div v-if="tracksMap.size > 5" :class="$style.card">
-        <button @click="showAllTracks = true">+{{ tracksMap.size - 5 }}</button>
+        <button @click="showAllTracks = false">
+          +{{ tracksMap.size - 5 }}
+        </button>
       </div>
     </div>
   </div>
@@ -123,11 +128,18 @@ const showAllTracks = ref(false)
 </template>
 
 <style lang="scss" module>
+.parentContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
 .largeCard {
   height: 69%;
   width: 92%;
   position: absolute;
-  bottom: calc(300px + 24px);
+  bottom: calc(200px + 24px);
   left: 50%;
   transform: translateX(-50%);
 }
@@ -147,9 +159,7 @@ const showAllTracks = ref(false)
   width: 192px;
 }
 
-.TrackContainer {
-  position: absolute;
-  bottom: calc(100px + 24px);
+.SuViewContainer {
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -157,6 +167,8 @@ const showAllTracks = ref(false)
   align-items: center;
   gap: 8px;
   align-self: stretch;
+  position: absolute;
+  bottom: 100px;
 }
 
 .card {

From 3b1b1f3f59ec5376d4fd4de674417e44c45824bc Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 12:15:08 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=E6=9C=80=E4=BD=8E=E9=99=90=E3=81=AE?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/UserList.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 75f488c88f..f4438e08dd 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -82,7 +82,13 @@ const showAllTracks = ref(false)
         </div>
       </template>
       <div v-if="tracksMap.size > 5" :class="$style.card">
-        <button @click="showAllTracks = false">
+        <button
+          @click="
+            () => {
+              selectedTrack = undefined
+            }
+          "
+        >
           +{{ tracksMap.size - 5 }}
         </button>
       </div>

From eaf04e4c2ab7617edea0467d4fbc84698afe4610 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 12:47:40 +0900
Subject: [PATCH 6/7] =?UTF-8?q?QallView=E3=81=ABflex=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/QallView.vue       | 293 ++++++++----------
 1 file changed, 135 insertions(+), 158 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 8b70d10ad9..32e0777af6 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -70,7 +70,6 @@ const toggleVideo = async () => {
       isCameraOn.value = false
     }
   } catch (err) {
-    // eslint-disable-next-line no-console
     console.error('Failed to toggle video:', err)
   }
 }
@@ -93,7 +92,6 @@ const toggleScreen = async () => {
       isScreenSharing.value = false
     }
   } catch (err) {
-    // eslint-disable-next-line no-console
     console.error('Failed to toggle screen sharing:', err)
   }
 }
@@ -191,120 +189,98 @@ const showShareScreenSettingDetail = ref(false)
         :class="$style.closeButton"
         @click="isSubView = true"
       />
-      <UserList />
-
-      <div :class="$style.controlBarContainer">
-        <div :class="$style.controlBar">
-          <div :class="$style.smallButtonGroup">
-            <div :class="$style.soundBoardButton">
-              <CallControlButtonSmall
-                icon="sound_detection_loud_sound"
-                :on-click="handleSound"
+
+      <!-- 縦並び用のラッパ -->
+      <div :class="$style.stackContainer">
+        <UserList :class="$style.userList" />
+
+        <div :class="$style.controlBarContainer">
+          <div :class="$style.controlBar">
+            <div :class="$style.smallButtonGroup">
+              <div :class="$style.soundBoardButton">
+                <CallControlButtonSmall
+                  icon="sound_detection_loud_sound"
+                  :on-click="handleSound"
+                />
+                <ClickOutside @click-outside="showSoundBoard = false">
+                  <SoundBoard v-if="showSoundBoard" />
+                </ClickOutside>
+              </div>
+              <div ref="reactionButton">
+                <CallControlButtonSmall
+                  icon="add_reaction"
+                  :on-click="handleReaction"
+                />
+              </div>
+            </div>
+            <div :class="$style.verticalBar"></div>
+            <div :class="$style.buttonWithDetail">
+              <CallControlButton
+                :icon="screenShareIcon"
+                :is-on="isScreenSharing"
+                :on-click="toggleScreen"
+                :mdi="false"
+                :inverted="isScreenSharing"
+              />
+              <DetailButton @click="showShareScreenSettingDetail = true" />
+              <ScreenShareDetailSetting
+                :open="showShareScreenSettingDetail"
+                @add="isScreenSharing = true"
+                @close="showShareScreenSettingDetail = false"
               />
-              <ClickOutside @click-outside="showSoundBoard = false">
-                <SoundBoard v-if="showSoundBoard" />
-              </ClickOutside>
             </div>
-            <div ref="reactionButton">
-              <CallControlButtonSmall
-                icon="add_reaction"
-                :on-click="handleReaction"
+            <div :class="$style.buttonWithDetail">
+              <CallControlButton
+                :icon="cameraIcon"
+                :is-on="isCameraOn"
+                :on-click="toggleVideo"
+                :inverted="isCameraOn"
+              />
+              <DetailButton
+                :inverted="isCameraOn"
+                @click="showCameraDetailSetting = true"
+              />
+              <CameraDetailSetting
+                :open="showCameraDetailSetting"
+                :video-inputs="videoInputs"
+                @save="handleBackgroundSave"
+                @add="isCameraOn = true"
+                @close="showCameraDetailSetting = false"
               />
             </div>
-          </div>
-          <div :class="$style.verticalBar"></div>
-          <div :class="$style.buttonWithDetail">
             <CallControlButton
-              :icon="screenShareIcon"
-              :is-on="isScreenSharing"
-              :on-click="toggleScreen"
-              :mdi="false"
-              :inverted="isScreenSharing"
-            />
-            <DetailButton
-              @click="
-                () => {
-                  showShareScreenSettingDetail = true
-                }
-              "
-            />
-            <ScreenShareDetailSetting
-              :open="showShareScreenSettingDetail"
-              @add="
-                () => {
-                  isScreenSharing = true
-                }
-              "
-              @close="
-                () => {
-                  showShareScreenSettingDetail = false
-                }
-              "
+              :icon="micIcon"
+              :is-on="isMicOn"
+              :on-click="toggleAudio"
+              :inverted="isMicOn"
             />
-          </div>
-          <div :class="$style.buttonWithDetail">
             <CallControlButton
-              :icon="cameraIcon"
-              :is-on="isCameraOn"
-              :on-click="toggleVideo"
-              :inverted="isCameraOn"
-            />
-            <DetailButton
-              :inverted="isCameraOn"
-              @click="
-                () => {
-                  showCameraDetailSetting = true
-                }
-              "
-            />
-            <CameraDetailSetting
-              :open="showCameraDetailSetting"
-              :video-inputs="videoInputs"
-              @save="handleBackgroundSave"
-              @add="
-                () => {
-                  isCameraOn = true
-                }
-              "
-              @close="
-                () => {
-                  showCameraDetailSetting = false
-                }
-              "
+              icon="phone-hangup"
+              is-on
+              :on-click="leaveQall"
+              :on-background-color="'#F26451'"
             />
-          </div>
-          <CallControlButton
-            :icon="micIcon"
-            :is-on="isMicOn"
-            :on-click="toggleAudio"
-            :inverted="isMicOn"
-          />
-          <CallControlButton
-            icon="phone-hangup"
-            is-on
-            :on-click="leaveQall"
-            :on-background-color="'#F26451'"
-          />
-          <div :class="$style.verticalBar"></div>
-          <div :class="$style.smallButtonGroup">
-            <div :class="$style.participantsContainer">
-              <ClickOutside @click-outside="showParticipants = false">
-                <div v-if="showParticipants" :class="$style.participantsList">
-                  <div :class="$style.participantsContent">
-                    <participant-list
-                      v-for="participant in filteredParticipants"
-                      :key="participant.user.id"
-                      :participant="participant.user"
-                      :track-info="getParticipantTrackInfo(participant)!"
-                    />
+            <div :class="$style.verticalBar"></div>
+            <div :class="$style.smallButtonGroup">
+              <div :class="$style.participantsContainer">
+                <ClickOutside @click-outside="showParticipants = false">
+                  <div v-if="showParticipants" :class="$style.participantsList">
+                    <div :class="$style.participantsContent">
+                      <participant-list
+                        v-for="participant in filteredParticipants"
+                        :key="participant.user.id"
+                        :participant="participant.user"
+                        :track-info="getParticipantTrackInfo(participant)!"
+                      />
+                    </div>
                   </div>
-                </div>
-              </ClickOutside>
-              <CallControlButtonSmall
-                icon="account-multiple"
-                :on-click="handleGroup"
-                mdi
-              />
+                </ClickOutside>
+                <CallControlButtonSmall
+                  icon="account-multiple"
+                  :on-click="handleGroup"
+                  mdi
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -314,58 +290,33 @@ const showShareScreenSettingDetail = ref(false)
 </template>
 
 <style lang="scss" module>
-.participantsContainer {
+.Block {
+  height: 100%;
+  width: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.participantsList {
-  position: absolute;
-  bottom: 100%;
-  right: 50%;
-  width: 450px;
-  height: 300px;
-  @include background-primary;
-  border-radius: 8px;
-  margin-bottom: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  transform: translateX(50%);
-  @include color-ui-primary;
-}
-
-.participantsContent {
+.stackContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
   height: 100%;
-  overflow-y: auto;
-  padding: 16px;
-  border: 2px solid $theme-background-secondary-default;
-  border-radius: 8px;
-}
-
-.controlBarContainer {
-  position: absolute;
-  bottom: 24px; // 仮置き，メッセージの表示非表示に動的対応
-  left: 50%;
-  transform: translateX(-50%);
 }
 
-.channelView {
-  position: absolute;
-  width: 30%;
-  right: 0;
-  bottom: 0;
+.userList {
+  flex-grow: 1;
 }
 
-.Block {
-  height: 100%;
-  height: 100%;
-}
-
-.Header {
-  font: {
-    size: 30px;
-    weight: bold;
-  }
-  color: green;
-  text-align: center;
+.controlBarContainer {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  flex-grow: 0;
+  margin-bottom: 24px;
 }
 
 .controlBar {
@@ -376,13 +327,6 @@ const showShareScreenSettingDetail = ref(false)
   width: 100%;
 }
 
-.verticalBar {
-  width: 1px;
-  height: 64px;
-  background-color: #ced6db;
-  margin: 0 16px;
-}
-
 .smallButtonGroup {
   display: flex;
   align-items: center;
@@ -398,6 +342,39 @@ const showShareScreenSettingDetail = ref(false)
   position: relative;
 }
 
+.participantsContainer {
+  position: relative;
+}
+
+.participantsList {
+  position: absolute;
+  bottom: 100%;
+  right: 50%;
+  width: 450px;
+  height: 300px;
+  @include background-primary;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transform: translateX(50%);
+  @include color-ui-primary;
+}
+
+.participantsContent {
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  border: 2px solid $theme-background-secondary-default;
+  border-radius: 8px;
+}
+
+.verticalBar {
+  width: 1px;
+  height: 64px;
+  background-color: #ced6db;
+  margin: 0 16px;
+}
+
 .closeButton {
   position: absolute;
   top: 1rem;

From 5da6b8fdd0329b51854d1b002cfec41b71a64ea2 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 13:05:40 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:absolute=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/UserList.vue       | 175 ++++++++++--------
 1 file changed, 93 insertions(+), 82 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index f4438e08dd..a8520b3d63 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -24,73 +24,78 @@ const showAllTracks = ref(false)
     :key="selectedTrack.trackPublication?.trackSid"
     :class="$style.parentContainer"
   >
-    <div :class="$style.largeCard">
-      <VideoComponent
-        v-if="
-          selectedTrack.trackPublication?.kind === 'video' &&
-          !screenShareTrackSidMap.has(selectedSid ?? '')
-        "
-        :track-info="selectedTrack"
-      />
-      <ScreenShareComponent
-        v-else-if="selectedTrack.trackPublication?.kind === 'video'"
-        :track-info="selectedTrack"
-        :audio-track-info="
-          tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
-        "
-        not-mute
-      />
-      <UserCard
-        v-else-if="
-          selectedTrack.trackPublication?.kind === 'audio' &&
-          !screenShareTrackSidMap
-            .values()
-            ?.some?.(valueSid => valueSid === selectedSid)
-        "
-        :track-info="selectedTrack"
-      />
-    </div>
+    <div :class="$style.flexContainer">
+      <div :class="$style.largeCard">
+        <VideoComponent
+          v-if="
+            selectedTrack.trackPublication?.kind === 'video' &&
+            !screenShareTrackSidMap.has(selectedSid ?? '')
+          "
+          :track-info="selectedTrack"
+        />
+        <ScreenShareComponent
+          v-else-if="selectedTrack.trackPublication?.kind === 'video'"
+          :track-info="selectedTrack"
+          :audio-track-info="
+            tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
+          "
+          not-mute
+        />
+        <UserCard
+          v-else-if="
+            selectedTrack.trackPublication?.kind === 'audio' &&
+            !screenShareTrackSidMap
+              .values()
+              ?.some?.(valueSid => valueSid === selectedSid)
+          "
+          :track-info="selectedTrack"
+        />
+      </div>
 
-    <div :class="$style.SuViewContainer">
-      <template v-for="([sid, track], index) in tracksMap.entries()" :key="sid">
-        <div
-          v-if="index < 5"
-          :class="$style.card"
-          @click="[selectedTrack, selectedSid] = [track, sid]"
+      <div :class="$style.subViewContainer">
+        <template
+          v-for="([sid, track], index) in tracksMap.entries()"
+          :key="sid"
         >
-          <VideoComponent
-            v-if="
-              track.trackPublication?.kind === 'video' &&
-              !screenShareTrackSidMap.has(sid)
-            "
-            :track-info="track"
-          />
-          <ScreenShareComponent
-            v-else-if="track.trackPublication?.kind === 'video'"
-            :track-info="track"
-            :audio-track-info="
-              tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+          <div
+            v-if="index < 5"
+            :class="$style.card"
+            @click="[selectedTrack, selectedSid] = [track, sid]"
+          >
+            <VideoComponent
+              v-if="
+                track.trackPublication?.kind === 'video' &&
+                !screenShareTrackSidMap.has(sid)
+              "
+              :track-info="track"
+            />
+            <ScreenShareComponent
+              v-else-if="track.trackPublication?.kind === 'video'"
+              :track-info="track"
+              :audio-track-info="
+                tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+              "
+            />
+            <UserCard
+              v-else-if="
+                track.trackPublication?.kind === 'audio' &&
+                !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
+              "
+              :track-info="track"
+            />
+          </div>
+        </template>
+        <div v-if="tracksMap.size > 5" :class="$style.card">
+          <button
+            @click="
+              () => {
+                selectedTrack = undefined
+              }
             "
-          />
-          <UserCard
-            v-else-if="
-              track.trackPublication?.kind === 'audio' &&
-              !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
-            "
-            :track-info="track"
-          />
+          >
+            +{{ tracksMap.size - 5 }}
+          </button>
         </div>
-      </template>
-      <div v-if="tracksMap.size > 5" :class="$style.card">
-        <button
-          @click="
-            () => {
-              selectedTrack = undefined
-            }
-          "
-        >
-          +{{ tracksMap.size - 5 }}
-        </button>
       </div>
     </div>
   </div>
@@ -132,7 +137,6 @@ const showAllTracks = ref(false)
     </template>
   </div>
 </template>
-
 <style lang="scss" module>
 .parentContainer {
   display: flex;
@@ -140,14 +144,33 @@ const showAllTracks = ref(false)
   justify-content: center;
   align-items: center;
   gap: 4px;
+  height: 100%;
+  width: 100%;
 }
+
+.flexContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 100%;
+  width: 100%;
+}
+
 .largeCard {
-  height: 69%;
-  width: 92%;
-  position: absolute;
-  bottom: calc(200px + 24px);
-  left: 50%;
-  transform: translateX(-50%);
+  flex-grow: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.subViewContainer {
+  flex-grow: 0;
+  height: 108px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
 }
 
 .gridContainer {
@@ -165,18 +188,6 @@ const showAllTracks = ref(false)
   width: 192px;
 }
 
-.SuViewContainer {
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  align-self: stretch;
-  position: absolute;
-  bottom: 100px;
-}
-
 .card {
   height: 108px;
   width: 192px;