Merge pull request #262 from Monadical-SAS/sara/small-screens

Small screens: fixes

www/app/layout.tsx

@@ -67,7 +67,7 @@ export default function RootLayout({ children }) {
             <ErrorMessage />
             <div
               id="container"
-              className="items-center h-[100svh] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
+              className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
             >
               <header className="flex justify-between items-center w-full">
                 {/* Logo on the left */}

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

@@ -35,7 +35,12 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     );
   }
 
-  const fullTranscript = topics.topics?.map(topic => topic.transcript).join('\n\n').replace(/ +/g, ' ').trim() || '';
+  const fullTranscript =
+    topics.topics
+      ?.map((topic) => topic.transcript)
+      .join("\n\n")
+      .replace(/ +/g, " ")
+      .trim() || "";
 
   return (
     <>
@@ -58,10 +63,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               useActiveTopic={useActiveTopic}
               autoscroll={false}
             />
-            <div className="w-full h-full grid grid-rows-layout-one gap-2 lg:gap-4">
+            <div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">
               <section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
                 {transcript?.response?.longSummary && (
-                  <FinalSummary fullTranscript={fullTranscript} summary={transcript?.response?.longSummary} />
+                  <FinalSummary
+                    fullTranscript={fullTranscript}
+                    summary={transcript?.response?.longSummary}
+                  />
                 )}
               </section>
 
@@ -73,7 +81,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                     size={98}
                   />
                 </div>
-                <div className="flex-grow">
+                <div className="flex-grow max-w-full">
                   <ShareLink />
                 </div>
               </section>

www/app/transcripts/audioInputsDropdown.tsx

@@ -6,19 +6,9 @@ const AudioInputsDropdown: React.FC<{
   audioDevices: Option[];
   disabled: boolean;
   hide: () => void;
+  deviceId: string;
   setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
 }> = (props) => {
-  const [ddOptions, setDdOptions] = useState<Option[]>([]);
-
-  useEffect(() => {
-    if (props.audioDevices) {
-      setDdOptions(props.audioDevices);
-      props.setDeviceId(
-        props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
-      );
-    }
-  }, [props.audioDevices]);
-
   const handleDropdownChange = (option: Option) => {
     props.setDeviceId(option.value);
     props.hide();
@@ -26,9 +16,9 @@ const AudioInputsDropdown: React.FC<{
 
   return (
     <Dropdown
-      options={ddOptions}
+      options={props.audioDevices}
       onChange={handleDropdownChange}
-      value={ddOptions[0]}
+      value={props.deviceId}
       className="flex-grow w-full"
       disabled={props.disabled}
     />

www/app/transcripts/finalSummary.tsx

@@ -34,29 +34,31 @@ export default function FinalSummary(props: FinalSummaryProps) {
 
   return (
     <div className="overflow-y-auto h-auto max-h-full">
-      <div className="flex flex-row justify-between items-center">
+      <div className="flex flex-row flex-wrap-reverse justify-between items-center">
-        <h2 className="text-xl md:text-2xl font-bold">Final Summary</h2>
+        <h2 className="text-lg sm:text-xl md:text-2xl font-bold">
-        <div className="ml-auto flex space-x-2">
+          Final Summary
-        <button
+        </h2>
-          onClick={handleCopyTranscriptClick}
+        <div className="ml-auto flex space-x-2 mb-2">
-          className={
+          <button
-            (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
+            onClick={handleCopyTranscriptClick}
-            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+            className={
-          }
+              (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
-          style={{ minHeight: "30px" }}
+              " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
-        >
+            }
-          {isCopiedTranscript ? "Copied!" : "Copy Full Transcript"}
+            style={{ minHeight: "30px" }}
-        </button>
+          >
-        <button
+            {isCopiedTranscript ? "Copied!" : "Copy Full Transcript"}
-          onClick={handleCopySummaryClick}
+          </button>
-          className={
+          <button
-            (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
+            onClick={handleCopySummaryClick}
-            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+            className={
-          }
+              (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
-          style={{ minHeight: "30px" }}
+              " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
-        >
+            }
-          {isCopiedSummary ? "Copied!" : "Copy Summary"}
+            style={{ minHeight: "30px" }}
-        </button>
+          >
+            {isCopiedSummary ? "Copied!" : "Copy Summary"}
+          </button>
         </div>
       </div>
 

www/app/transcripts/recorder.tsx

@@ -110,8 +110,7 @@ export default function Recorder(props: RecorderProps) {
           : undefined,
       });
 
-      if (!props.transcriptId)
+      if (!props.transcriptId) {
-      {
         const _wshack: any = _wavesurfer;
         _wshack.renderer.renderSingleCanvas = () => {};
       }
@@ -280,7 +279,7 @@ export default function Recorder(props: RecorderProps) {
 
   useEffect(() => {
     if (props.audioDevices && props.audioDevices.length > 0) {
-      setDeviceId[props.audioDevices[0].value];
+      setDeviceId(props.audioDevices[0].value);
     }
   }, [props.audioDevices]);
 
@@ -348,7 +347,7 @@ export default function Recorder(props: RecorderProps) {
           >
             {isRecording ? "Stop" : "Record"}
           </button>
-          {props.audioDevices && props.audioDevices?.length > 0 && (
+          {props.audioDevices && props.audioDevices?.length > 0 && deviceId && (
             <>
               <button
                 className="text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg focus-visible:outline outline-blue-400"
@@ -366,6 +365,7 @@ export default function Recorder(props: RecorderProps) {
                   audioDevices={props.audioDevices}
                   disabled={recordStarted}
                   hide={() => setShowDevices(false)}
+                  deviceId={deviceId}
                 />
               </div>
             </>

www/app/transcripts/shareLink.tsx

@@ -39,7 +39,7 @@ const ShareLink = () => {
           value={currentUrl}
           ref={inputRef}
           onChange={() => {}}
-          className="border rounded-lg md:rounded-xl p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
+          className="border rounded-lg md:rounded-xl p-2 flex-grow flex-shrink overflow-auto mr-2 text-sm bg-slate-100 outline-slate-400"
         />
         <button
           onClick={handleCopyClick}

www/app/transcripts/topicList.tsx

@@ -61,10 +61,10 @@ export function TopicList({
   }, [activeTopic, autoscroll]);
 
   return (
-    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 flex flex-col justify-center align-center">
+    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-1 sm:p-2 md:px-4 flex flex-col justify-center align-center">
       {topics.length > 0 ? (
         <>
-          <h2 className="md:text-lg font-bold mb-2">Topics</h2>
+          <h2 className="ml-2 md:text-lg font-bold mb-2">Topics</h2>
 
           {autoscroll && (
             <ScrollToBottom
@@ -86,7 +86,7 @@ export function TopicList({
                   setActiveTopic(activeTopic?.id == topic.id ? null : topic)
                 }
               >
-                <div className="w-full flex justify-between items-center rounded-lg md:rounded-xl text-lg md:text-xl font-bold leading-tight">
+                <div className="w-full flex justify-between items-center rounded-lg md:rounded-xl xs:text-base sm:text-lg md:text-xl font-bold leading-tight">
                   <p>
                     <span className="font-light font-mono text-slate-500 text-base md:text-lg">
                       [{formatTime(topic.timestamp)}]&nbsp;