ui: data comps of survey summary are now responsive

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/CTASummary.tsx

@@ -26,19 +26,21 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">Call-to-Action</div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2 ">Call-to-Action</div>
+          <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4 " />
             {ctr.count} responses
           </div>
         </div>
       </div>
-      <div className="space-y-5 rounded-b-lg bg-white px-6 pb-6 pt-4">
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         <div className="text flex justify-between px-2 pb-2">
           <div className="mr-8 flex space-x-1">
             <p className="font-semibold text-slate-700">Clickthrough Rate (CTR)</p>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/ConsentSummary.tsx

@@ -34,19 +34,21 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">Consent</div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2">Consent</div>
+          <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4 " />
             {ctr.count} responses
           </div>
         </div>
       </div>
-      <div className="space-y-5 rounded-b-lg bg-white px-6 pb-6 pt-4">
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         <div>
           <div className="text flex justify-between px-2 pb-2">
             <div className="mr-8 flex space-x-1">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/MultipleChoiceSummary.tsx

@@ -124,17 +124,19 @@ export default function MultipleChoiceSummary({
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2">
             {isSingleChoice
               ? "Multiple-Choice Single Select Question"
               : "Multiple-Choice Multi Select Question"}
           </div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+          <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4 " />
             {totalResponses} responses
           </div>
@@ -144,11 +146,11 @@ export default function MultipleChoiceSummary({
           </div> */}
         </div>
       </div>
-      <div className="space-y-5 rounded-b-lg bg-white px-6 pb-6 pt-4">
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result: any, resultsIdx) => (
           <div key={result.label}>
-            <div className="text flex justify-between px-2 pb-2">
-              <div className="mr-8 flex space-x-1">
+            <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
+              <div className="mr-8 flex w-full justify-between space-x-1 sm:justify-normal">
                 <p className="font-semibold text-slate-700">
                   {results.length - resultsIdx} - {result.label}
                 </p>
@@ -158,7 +160,7 @@ export default function MultipleChoiceSummary({
                   </p>
                 </div>
               </div>
-              <p className="flex w-32 items-end justify-end text-slate-600">
+              <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
                 {result.count} {result.count === 1 ? "response" : "responses"}
               </p>
             </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/NPSSummary.tsx

@@ -74,19 +74,21 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">Net Promoter Score (NPS)</div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2">Net Promoter Score (NPS)</div>
+          <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4 " />
             {result.total} responses
           </div>
         </div>
       </div>
-      <div className="space-y-5 bg-white px-6 pb-6 pt-4">
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {["promoters", "passives", "detractors"].map((group) => (
           <div key={group}>
             <div className="mb-2 flex justify-between">
@@ -107,7 +109,7 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
         ))}
       </div>
       {dismissed.count > 0 && (
-        <div className="border-t bg-white px-6 pb-6 pt-4">
+        <div className="border-t bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
           <div key={dismissed.label}>
             <div className="text flex justify-between px-2 pb-2">
               <div className="mr-8 flex space-x-1">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/OpenTextSummary.tsx

@@ -18,13 +18,15 @@ function findEmail(person) {
 export default function OpenTextSummary({ questionSummary, environmentId }: OpenTextSummaryProps) {
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">Open Text Question</div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2 ">Open Text Question</div>
+          <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4" />
             {questionSummary.responses.length} Responses
           </div>
@@ -32,9 +34,9 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
       </div>
       <div className="rounded-b-lg bg-white ">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
-          <div className="pl-6">User</div>
-          <div className="col-span-2 pl-6">Response</div>
-          <div className="px-6">Time</div>
+          <div className="pl-4 md:pl-6">User</div>
+          <div className="col-span-2 pl-4 md:pl-6">Response</div>
+          <div className="px-4 md:px-6">Time</div>
         </div>
         {questionSummary.responses.map((response) => {
           const email = response.person && findEmail(response.person);
@@ -42,29 +44,32 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
           return (
             <div
               key={response.id}
-              className="grid  grid-cols-4 items-center border-b border-slate-100 py-2 text-slate-800">
-              <div className="pl-6">
+              className="grid  grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
+              <div className="pl-4 md:pl-6">
                 {response.person ? (
                   <Link
                     className="ph-no-capture group flex items-center"
                     href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <PersonAvatar personId={response.person.id} />
-
-                    <p className="ph-no-capture ml-2 text-slate-600 group-hover:underline">
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId={response.person.id} />
+                    </div>
+                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
                       {displayIdentifier}
                     </p>
                   </Link>
                 ) : (
                   <div className="group flex items-center">
-                    <PersonAvatar personId="anonymous" />
-                    <p className="ml-2 text-slate-600">Anonymous</p>
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId="anonymous" />
+                    </div>
+                    <p className="break-all text-slate-600 md:ml-2">Anonymous</p>
                   </div>
                 )}
               </div>
               <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                 {response.value}
               </div>
-              <div className="px-6 text-slate-500">{timeSince(response.updatedAt.toISOString())}</div>
+              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
             </div>
           );
         })}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/RatingSummary.tsx

@@ -75,19 +75,21 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
-      <div className="space-y-2 px-6 pb-5 pt-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div>
-          <h3 className="pb-1 text-xl font-semibold text-slate-900">{questionSummary.question.headline}</h3>
+          <h3 className="text-lg pb-1 font-semibold text-slate-900 md:text-xl">
+            {questionSummary.question.headline}
+          </h3>
         </div>
-        <div className="flex space-x-2 font-semibold text-slate-600">
-          <div className="rounded-lg bg-slate-100 p-2 text-sm">Rating Question</div>
-          <div className=" flex items-center rounded-lg bg-slate-100 p-2 text-sm">
+        <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
+          <div className="rounded-lg bg-slate-100 p-2">Rating Question</div>
+          <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxStackIcon className="mr-2 h-4 w-4 " />
             {totalResponses} responses
           </div>
         </div>
       </div>
-      <div className="space-y-5 bg-white px-6 pb-6 pt-4">
+      <div className="space-y-5 bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result: any) => (
           <div key={result.label}>
             <div className="text flex justify-between px-2 pb-2">

packages/ui/components/ProgressBar.tsx

@@ -37,7 +37,7 @@ export const HalfCircle: React.FC<HalfCircleProps> = ({ value }: { value: number
       </div>
       <div className="flex justify-between text-sm leading-10 text-slate-600">
         <p>-100</p>
-        <p className="text-4xl text-black">{Math.round(value)}</p>
+        <p className="text-2xl text-black md:text-4xl">{Math.round(value)}</p>
         <p>100</p>
       </div>
     </div>