More css edits

Author: simonjonsson87

chat-ui-quince/index.html

@@ -84,7 +84,7 @@ <h2 class="sidebar-title">Your assets</h2>
             <div id="voice-btn-text"></div>
           </button>
 
-          <button id="read-out-loud-btn"><img src="speaker-disabled.png" alt="Read Out Loud" id="speaker-icon"></button>
+          <!-- <button id="read-out-loud-btn"><img src="speaker-disabled.png" alt="Read Out Loud" id="speaker-icon"></button> -->
 
           <div class="read-out-loud-btn">
             <div id="read-out-loud-btn-enabled">

chat-ui-quince/src/code.js

@@ -216,11 +216,17 @@ function toggleReadOutLoud() {
     isReadOutLoudEnabled = !isReadOutLoudEnabled;
 
     const readOutLoudBtn = document.getElementById('read-out-loud-btn');
+    const readOutLoudBtnEnabled = document.getElementById('read-out-loud-btn-enabled')
+    const readOutLoudBtnDisabled = document.getElementById('read-out-loud-btn-disabled')
     // Update the button icon based on the read out loud status
     if (isReadOutLoudEnabled) {
-        speakerIcon.src = "speaker-enabled.png"; // Speaker image
+        // speakerIcon.src = "speaker-enabled.png"; // Speaker image
+        readOutLoudBtnEnabled.display = "flex";
+        readOutLoudBtnDisabled.display = "none";
     } else {
-        speakerIcon.src = "speaker-disabled.png"; // Crossed-out speaker image
+        //speakerIcon.src = "speaker-disabled.png"; // Crossed-out speaker image
+        readOutLoudBtnEnabled.display = "none";
+        readOutLoudBtnDisabled.display = "flex";
     }
 
     // Optionally, stop any current speech when toggling

chat-ui-quince/src/style.css

@@ -152,12 +152,22 @@ body {
   font-size: 16px;
 }
 
-
-
 #send-btn:hover {
   background: #e0e0e0;
 }
 
+#voice-btn {
+  position: absolute;
+  left: 15px;
+  bottom: 20px;
+}
+
+.read-out-loud-btn {
+  position: absolute;
+  left: 40px;
+  bottom: 20px;
+}
+
 #speaker-icon {
   width: 20px; /* Match width of send button */
   height: 20px;
@@ -207,7 +217,8 @@ body {
   }
   .sidebar {
     margin: 20px 20px 20px 20px; /* Equal margins all around */
-    height: calc(100% - 80px); /* Full height minus top/bottom margins */
+    /*height: calc(100% - 80px); /* Full height minus top/bottom margins */
+    height: calc(100vh - 136px);
     max-height: none; /* Remove cap */
   }
   .chat-container {