fixed layout

www/app/styles/form.scss

@@ -0,0 +1,37 @@
+@media (prefers-color-scheme: dark) {
+  .select-search-container,
+  .input-container {
+    --select-search-background: #fff;
+    --select-search-border: #dce0e8;
+    --select-search-selected: #1e66f5;
+    --select-search-text: #000;
+    --select-search-subtle-text: #6c6f85;
+    --select-search-highlight: #eff1f5;
+  }
+}
+
+body.is-dark-mode .select-search-container,
+body.is-dark-mode .input-container {
+  --select-search-background: #fff;
+  --select-search-border: #dce0e8;
+  --select-search-selected: #1e66f5;
+  --select-search-text: #000;
+  --select-search-subtle-text: #6c6f85;
+  --select-search-highlight: #eff1f5;
+}
+
+body.is-light-mode .select-search-container,
+body.is-light-mode .input-container {
+  --select-search-background: #fff;
+  --select-search-border: #dce0e8;
+  --select-search-selected: #1e66f5;
+  --select-search-text: #000;
+  --select-search-subtle-text: #6c6f85;
+  --select-search-highlight: #eff1f5;
+}
+
+.input-container,
+.select-search-container {
+  max-width: 100%;
+  width: auto;
+}

www/app/transcripts/liveTranscription.tsx

@@ -6,12 +6,10 @@ type LiveTranscriptionProps = {
 export default function LiveTrancription(props: LiveTranscriptionProps) {
   return (
     <div className="text-center p-4">
-      <p className="text-lg md:text-xl font-bold line-clamp-4">
-        {props.translateText ? props.translateText : props.text}
-      </p>
+      <p className="text-lg md:text-xl font-bold line-clamp-4">{props.text}</p>
       {props.translateText && (
-        <p className="text-base md:textlg font-bold line-clamp-4">
-          {props.text}
+        <p className="text-base md:text-lg font-bold line-clamp-4 mt-4">
+          {props.translateText}
         </p>
       )}
     </div>

www/app/transcripts/new/page.tsx

@@ -1,7 +1,9 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import useAudioDevice from "../useAudioDevice";
+import "react-select-search/style.css";
 import "../../styles/button.css";
+import "../../styles/form.scss";
 import getApi from "../../lib/getApi";
 import About from "../../(aboutAndPrivacy)/about";
 import Privacy from "../../(aboutAndPrivacy)/privacy";
@@ -9,7 +11,6 @@ import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
 import SelectSearch from "react-select-search";
 import { supportedLatinLanguages } from "../../supportedLanguages";
-import "react-select-search/style.css";
 
 const TranscriptCreate = () => {
   // const transcript = useTranscript(stream, api);
@@ -28,83 +29,104 @@ const TranscriptCreate = () => {
 
   const createTranscript = useCreateTranscript();
 
+  const [loadingSend, setLoadingSend] = useState(false);
+
   const send = () => {
-    if (createTranscript.loading || permissionDenied) return;
+    if (loadingSend || createTranscript.loading || permissionDenied) return;
+    setLoadingSend(true);
     createTranscript.create({ name, targetLanguage });
   };
+
   useEffect(() => {
     createTranscript.response &&
       router.push(`/transcripts/${createTranscript.response.id}/record`);
   }, [createTranscript.response]);
 
+  useEffect(() => {
+    if (createTranscript.error) setLoadingSend(false);
+  }, [createTranscript.error]);
+
   const { loading, permissionOk, permissionDenied, requestPermission } =
     useAudioDevice();
 
   return (
     <>
-      <div></div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-mobile-inner lg:grid-rows-1 gap-2 lg:gap-4 h-full">
-        <section className="flex flex-col w-full h-full items-center justify-evenly p-4 md:px-6 md:py-8">
+      <div className="hidden lg:block"></div>
+      <div className="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-4 lg:h-full h-auto flex flex-col">
+        <section className="flex flex-col w-full lg:h-full items-center justify-evenly p-4 md:px-6 md:py-8">
           <div className="flex flex-col max-w-xl items-center justify-center">
             <h1 className="text-2xl font-bold mb-2">
               Welcome to reflector.media
             </h1>
             <p>
               Reflector is a transcription and summarization pipeline that
-              transforms audio into knowledge. The output is meeting minutes and
-              topic summaries enabling topic-specific analyses stored in your
-              systems of record. This is accomplished on your infrastructure –
-              without 3rd parties – keeping your data private, secure, and
-              organized.
+              transforms audio into knowledge.
+              <span className="hidden md:block">
+                The output is meeting minutes and topic summaries enabling
+                topic-specific analyses stored in your systems of record. This
+                is accomplished on your infrastructure – without 3rd parties –
+                keeping your data private, secure, and organized.
+              </span>
             </p>
             <About buttonText="Learn more" />
+            <p className="mt-6">
+              In order to use Reflector, we kindly request permission to access
+              your microphone during meetings and events.
+            </p>
+            <Privacy buttonText="Privacy policy" />
           </div>
         </section>
-        <section className="rounded-xl md:bg-blue-200 flex flex-col justify-start p-6">
-          <h2 className="text-2xl font-bold mt-4 mb-2"> Try Reflector</h2>
-          <label className="mb-3">
-            <p>What is this meeting about ?</p>
-            <input type="text" onChange={nameChange} />
-          </label>
+        <section className="flex flex-col justify-center items-center w-full h-full">
+          <div className="rounded-xl md:bg-blue-200 md:w-96 p-4 lg:p-6 flex flex-col mb-4 md:mb-10">
+            <h2 className="text-2xl font-bold mt-2 mb-2"> Try Reflector</h2>
+            <label className="mb-3">
+              <p>Enter the name of your recording</p>
+              <div className="select-search-container">
+                <input
+                  className="select-search-input"
+                  type="text"
+                  onChange={nameChange}
+                />
+              </div>
+            </label>
 
-          <label className="mb-3">
-            <p>Do you need live translation ?</p>
-            <SelectSearch
-              search
-              options={supportedLatinLanguages}
-              value={targetLanguage}
-              onChange={onLanguageChange}
-              placeholder="Choose your language"
-            />
-          </label>
+            <label className="mb-3">
+              <p>Live translate to </p>
+              <SelectSearch
+                search
+                options={supportedLatinLanguages}
+                value={targetLanguage}
+                onChange={onLanguageChange}
+                placeholder="Choose your language"
+              />
+            </label>
 
-          {loading ? (
-            <p className="">Checking permission...</p>
-          ) : permissionOk ? (
-            <> Microphone permission granted </>
-          ) : (
-            <>
+            {loading ? (
+              <p className="">Checking permission...</p>
+            ) : permissionOk ? (
+              <p className=""> Microphone permission granted </p>
+            ) : permissionDenied ? (
               <p className="">
-                In order to use Reflector, we kindly request permission to
-                access your microphone during meetings and events.
-                <br />
-                <Privacy buttonText="Privacy policy" />
-                <br />
-                {permissionDenied &&
-                  "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page."}
+                Permission to use your microphone was denied, please change the
+                permission setting in your browser and refresh this page.
               </p>
+            ) : (
               <button
-                className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
+                className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
                 onClick={requestPermission}
                 disabled={permissionDenied}
               >
-                {permissionDenied ? "Access denied" : "Grant Permission"}
+                Request Microphone Permission
               </button>
-            </>
-          )}
-          <button onClick={send} disabled={!permissionOk}>
-            {createTranscript.loading ? "loading" : "Send"}
-          </button>
+            )}
+            <button
+              className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+              onClick={send}
+              disabled={!permissionOk || loadingSend}
+            >
+              {loadingSend ? "loading" : "Send"}
+            </button>
+          </div>
         </section>
       </div>
     </>