@adriansteffan/reactive 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adriansteffan/reactive",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/experiment.tsx

@@ -131,11 +131,11 @@ export default function Experiment({
   }
 
   return (
-    <div className='px-4 w-full'>
+    <div className='w-full'>
       <div
         className={` ${
           config.showProgressBar ? '' : 'hidden '
-        } mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
+        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
       >
         <div
           className={`h-full bg-gray-200 rounded-full duration-300 ${

package/src/components/microphonecheck.tsx

@@ -114,7 +114,7 @@ const MicrophoneCheck = ({ next }: { next: (data: object) => void }) => {
   const [recordingExists, setRecordingExists] = useState(false);
 
   return (
-    <div className={`max-w-prose mx-auto mt-20 mb-20`}>
+    <div className={`max-w-prose mx-auto mt-20 mb-20 px-4 `}>
       <article className='prose prose-2xl prose-slate text-xl text-black leading-relaxed'>
         <h1 className='text-3xl mb-6 font-semibold'>Let's test your microphone!</h1>
         <p>

package/src/components/quest.tsx

@@ -92,7 +92,7 @@ function Quest({ next, surveyJson, customQuestions = {} }: {
   survey.onComplete.add(saveResults);
 
   return (
-    <div className="max-w-4xl mx-auto">
+    <div className="max-w-4xl mx-auto px-4">
       <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]" />
       <Survey model={survey} />
     </div>

package/src/components/text.tsx

@@ -17,7 +17,7 @@ function Text({
   };
 
   return (
-    <div className={`max-w-prose mx-auto ${className} mt-20 mb-20`}>
+    <div className={`max-w-prose mx-auto ${className} mt-20 mb-20 px-4 `}>
       <article
         className={`prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-4xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed
             ${animate ? 'animate-slide-down opacity-0' : ''}`}

package/src/components/upload.tsx

@@ -319,7 +319,7 @@ export default function Upload({
   }, [uploadState]);
 
   return (
-    <div className='flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16'>
+    <div className='flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16 px-10'>
       {uploadState == 'initial' && !autoUpload && (
         <>
           <p className=''>

package/src/components/voicerecorder.tsx

@@ -271,7 +271,7 @@ export const VoiceRecorder = ({
   };
 
   return (
-    <div className='flex flex-col items-center space-y-4 p-4 bg-white'>
+    <div className='flex flex-col items-center space-y-4 p-4 bg-white px-8 '>
       {/* Recording button */}
       {!audioUrl && (
         <button