Fix text overflow

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

@@ -55,15 +55,14 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               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">
-              <ShareLink />
-
-              <div className="py-2 h-full">
+            <div className="w-full h-full grid grid-rows-layout-one 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 text={transcript?.response?.longSummary} />
                 )}
-              </div>
-            </section>
+              </section>
+              <ShareLink />
+            </div>
           </div>
         </>
       )}

www/app/transcripts/shareLink.tsx

@@ -19,7 +19,7 @@ const ShareLink = () => {
 
   return (
     <div
-      className="p-2 md:p-4 mt-8 md:mt-4 rounded"
+      className="p-2 md:p-4 rounded"
       style={{ background: "rgba(96, 165, 250, 0.2)" }}
     >
       <p className="text-sm mb-2">
@@ -33,7 +33,7 @@ const ShareLink = () => {
           readOnly
           value={currentURL}
           ref={inputRef}
-          className="border rounded 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 mr-2 text-sm bg-slate-100 outline-slate-400"
         />
         <button
           onClick={handleCopyClick}

www/tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
       gridTemplateRows: {
         layout: "auto auto minmax(0, 1fr)",
         "mobile-inner": "minmax(0, 2fr) minmax(0, 1fr)",
+        "layout-one": "minmax(0, 1fr) auto",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",