Fixed Styles for bottom bar

app/custom/CustomControlBar.tsx

@@ -164,7 +164,7 @@ export function CustomControlBar() {
             cursor: isRecordingRequestPending ? 'not-allowed' : 'pointer',
           }}
         >
-          {isRecording ? (
+          {isRecording && isSelfRecord ? (
             <span className="material-symbols-outlined">stop_circle</span>
           ) : (
             <span className="material-symbols-outlined">radio_button_checked</span>

app/custom/ParticipantList.tsx

@@ -84,8 +84,8 @@ const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant }) => {
               alt={participant.name}
               className="avatar-image"
               style={{
-                maxWidth: '2rem',
-                maxHeight: '2rem',
+                width: '2rem',
+                height: '2rem',
               }}
             />
           ) : (

styles/CustomControlBar.css

@@ -6,11 +6,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 1rem;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   /* Added for Safari compatibility */
@@ -199,3 +198,9 @@
 .lk-grid-layout {
   height: calc(100vh - 60px) !important;
 }
+
+.control-bar.control-buttons {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}