visual fixes, remove error

www/app/layout.tsx

@@ -53,7 +53,7 @@ export const metadata: Metadata = {
     maximumScale: 1,
   },
 
-  robots: { index: false, follow: false, noarchive: true, noimageindex: true }
+  robots: { index: false, follow: false, noarchive: true, noimageindex: true },
 };
 
 export default function RootLayout({ children }) {

www/app/styles/globals.scss

@@ -10,7 +10,7 @@
 
 body {
   background: white;
-  scrollbar-color: rgb(96 165 250) transparent;
+  scrollbar-color: rgb(132, 186, 251) transparent;
   scrollbar-width: thin;
 }
 
@@ -26,12 +26,11 @@ body {
 }
 
 ::-webkit-scrollbar {
-  visibility: visible;
   width: 5px;
   opacity: 0.7;
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background-color: rgb(96 165 250);
+  background-color: rgb(132, 186, 251);
 }

www/app/transcripts/[transcriptId]/page.tsx

@@ -52,6 +52,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             <TopicList
               topics={topics?.topics || []}
               useActiveTopic={useActiveTopic}
+              autoscroll={false}
             />
             <section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
               <div className="py-2 h-full">

www/app/transcripts/new/page.tsx

@@ -65,6 +65,7 @@ const TranscriptCreate = () => {
             <TopicList
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}
+              autoscroll={true}
             />
             <section className="w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
               {!hasRecorded ? (

www/app/transcripts/scrollToBottom.tsx

@@ -9,7 +9,7 @@ type ScrollToBottomProps = {
 export default function ScrollToBottom(props: ScrollToBottomProps) {
   return (
     <div
-      className={`absolute bottom-0 right-0 ${
+      className={`absolute bottom-0 right-[0.15rem] md:right-[0.65rem] ${
         props.visible ? "flex" : "hidden"
       }  text-2xl cursor-pointer opacity-70 hover:opacity-100 transition-opacity duration-200 text-blue-400`}
       onClick={() => {

www/app/transcripts/topicList.tsx

@@ -14,22 +14,25 @@ type TopicListProps = {
     Topic | null,
     React.Dispatch<React.SetStateAction<Topic | null>>,
   ];
+  autoscroll: boolean;
 };
 
-export function TopicList({ topics, useActiveTopic }: TopicListProps) {
+export function TopicList({
+  topics,
+  useActiveTopic,
+  autoscroll,
+}: TopicListProps) {
   const [activeTopic, setActiveTopic] = useActiveTopic;
   const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
 
   useEffect(() => {
-    if (autoscrollEnabled) scrollToBottom();
+    if (autoscroll && autoscrollEnabled) scrollToBottom();
-  }, [topics]);
+  }, [topics.length]);
 
   const scrollToBottom = () => {
     const topicsDiv = document.getElementById("topics-div");
 
-    if (!topicsDiv)
+    if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
-      console.error("Could not find topics div to scroll to bottom");
-    else topicsDiv.scrollTop = topicsDiv.scrollHeight;
   };
 
   // scroll top is not rounded, heights are, so exact match won't work.
@@ -50,19 +53,23 @@ export function TopicList({ topics, useActiveTopic }: TopicListProps) {
   };
 
   useEffect(() => {
+    if (autoscroll) {
       const topicsDiv = document.getElementById("topics-div");
 
       topicsDiv && toggleScroll(topicsDiv);
-  }, [activeTopic]);
+    }
+  }, [activeTopic, autoscroll]);
 
   return (
     <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
       {topics.length > 0 ? (
         <>
+          {autoscroll && (
             <ScrollToBottom
               visible={!autoscrollEnabled}
               handleScrollBottom={scrollToBottom}
             />
+          )}
 
           <div
             id="topics-div"