diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
index cebd7b158..da27c9592 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -65,7 +65,7 @@ export default function Playground({
         )}
       </Header>
       <div className='flex flex-col gap-6 h-full relative'>
-        <div className='flex flex-col gap-3'>
+        <div className='flex flex-col gap-3 max-h-[35vh] overflow-y-auto custom-scrollbar'>
           <Text.H6M>Inputs</Text.H6M>
           {Object.keys(inputs).length > 0 ? (
             Object.entries(inputs).map(([param, value], idx) => (
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
index dfcae0c46..da2be7369 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
@@ -35,7 +35,7 @@ export function MetadataInfoTabs({
       </div>
       <div className='my-5 px-4 flex flex-col gap-y-5 relative w-full'>
         {beforeTabs}
-        <div className='flex flex-col gap-4 w-full'>
+        <div className='flex flex-col gap-4 w-full overflow-x-auto'>
           {children({ selectedTab })}
         </div>
       </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
index eb1871db0..92f9a5207 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -85,7 +85,7 @@ export function EvaluationResultInfo({
   return (
     <>
       <MetadataInfoTabs
-        className='w-80'
+        className='w-full'
         beforeTabs={
           <div>
             <Text.H6 color='foregroundMuted'>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
index ae0c44c8f..04df1718a 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
@@ -83,7 +83,7 @@ export function EvaluationResults({
         documentUuid={document.documentUuid}
         evaluationId={evaluation.id}
       />
-      <div className='relative flex flex-row w-full gap-4'>
+      <div className='relative flex flex-row w-full gap-4 overflow-x-auto min-w-[1024px]'>
         <div className='flex-1'>
           {evaluationResults.length === 0 && (
             <TableBlankSlate
@@ -117,12 +117,14 @@ export function EvaluationResults({
           )}
         </div>
         {selectedResult && (
-          <EvaluationResultInfo
-            key={selectedResult.id}
-            evaluation={evaluation}
-            evaluationResult={selectedResult}
-            providerLog={providerLog}
-          />
+          <div className='lg:w-1/2 2xl:w-1/3'>
+            <EvaluationResultInfo
+              key={selectedResult.id}
+              evaluation={evaluation}
+              evaluationResult={selectedResult}
+              providerLog={providerLog}
+            />
+          </div>
         )}
       </div>
     </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
index 2cefe035f..02467c3f2 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -76,7 +76,7 @@ export const DocumentLogsTable = ({
               <Text.H4 noWrap>{relativeTime(documentLog.createdAt)}</Text.H4>
             </TableCell>
             <TableCell>
-              <div className='flex flex-row gap-2 items-center'>
+              <div className='flex flex-row gap-2 items-center min-w-0 max-w-xs'>
                 <Badge
                   variant={documentLog.commit.version ? 'accent' : 'muted'}
                   shape='square'
@@ -87,7 +87,9 @@ export const DocumentLogsTable = ({
                       : 'Draft'}
                   </Text.H6>
                 </Badge>
-                <Text.H5>{documentLog.commit.title}</Text.H5>
+                <Text.H5 noWrap ellipsis>
+                  {documentLog.commit.title}
+                </Text.H5>
               </div>
             </TableCell>
             <TableCell>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
index 04d8f3b6a..6252209ab 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
@@ -24,8 +24,8 @@ export function DocumentLogs({
   })
 
   return (
-    <div className='flex flex-row w-full h-full gap-4'>
-      <div className='flex flex-col flex-grow min-w-0 h-full gap-y-4'>
+    <div className='flex flex-row w-full h-full gap-4 min-w-[1024px] overflow-x-auto'>
+      <div className='flex flex-col flex-grow h-full gap-y-4 min-w-0 lg:w-1/2 2xl:w-2/3'>
         <DocumentLogsTable
           documentLogs={documentLogs}
           selectedLog={selectedLog}
@@ -34,11 +34,12 @@ export function DocumentLogs({
         />
       </div>
       {selectedLog && (
-        <DocumentLogInfo
-          className='w-80'
-          documentLog={selectedLog}
-          providerLogs={providerLogs}
-        />
+        <div className='lg:w-1/2 2xl:w-1/3'>
+          <DocumentLogInfo
+            documentLog={selectedLog}
+            providerLogs={providerLogs}
+          />
+        </div>
       )}
     </div>
   )
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
index 2ee6010df..f90f90ac1 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
@@ -40,7 +40,7 @@ export default async function DocumentPage({
     }).$dynamic(),
   })
   return (
-    <div className='flex flex-col w-full h-full overflow-hidden p-6 gap-2 min-w-0'>
+    <div className='flex flex-col w-full h-full overflow-x-auto p-6 gap-2 min-w-0'>
       <TableWithHeader
         title='Logs'
         table={