fix responsiveness in responses

This commit is contained in:
Matthias Nannt
2022-08-16 13:46:07 +02:00
parent aa6c254872
commit 973f999756
2 changed files with 10 additions and 9 deletions

View File

@@ -58,8 +58,8 @@ export default function ResultsResponses({ formId }: ResultsResponseProps) {
return (
<div className="flex flex-col flex-1 w-full h-full mx-auto overflow-visible max-w-screen">
<div className="relative z-0 flex flex-1 overflow-visible">
<main className="relative z-0 flex-1 overflow-y-auto focus:outline-none xl:order-last">
<div className="relative z-0 flex flex-1 h-full overflow-visible">
<main className="relative z-0 flex-1 mb-32 overflow-y-auto focus:outline-none xl:order-last">
<div className="overflow-visible sm:rounded-lg">
{!activeSubmissionSession ? (
<button
@@ -86,7 +86,7 @@ export default function ResultsResponses({ formId }: ResultsResponseProps) {
formId={formId}
/>
</div>
<div className="flow-root pl-10">
<div className="hidden pl-10 md:flow-root">
<h1 className="mb-8 text-gray-700">Session Activity</h1>
<ul role="list" className="-mb-8">
{activeSubmissionSession.events.map(
@@ -159,9 +159,9 @@ export default function ResultsResponses({ formId }: ResultsResponseProps) {
)}
</div>
</main>
<aside className="flex-shrink-0 hidden border-r border-ui-gray-light md:order-first md:flex md:flex-col w-96">
<aside className="flex flex-col flex-1 flex-shrink-0 order-first h-full border-r border-ui-gray-light md:flex-none md:w-96">
<DownloadResponses formId={formId} />
<div className="pt-6 pb-1">
<div className="pt-4 pb-2">
<h2 className="px-5 text-lg font-medium text-gray-900">
Responses
</h2>
@@ -172,7 +172,8 @@ export default function ResultsResponses({ formId }: ResultsResponseProps) {
<RadioGroup
value={activeSubmissionSession}
onChange={setActiveSubmissionSession}
className="flex-1 min-h-0 overflow-y-auto"
className="flex-1 min-h-0 mb-32 overflow-y-auto shadow-inner"
as="div"
>
<div className="relative">
<ul className="relative z-0 divide-y divide-ui-gray-light">

View File

@@ -19,8 +19,8 @@ export default function SubmissionDisplay({ formId, submissionSession }) {
}
return (
<div className="flow-root mt-6">
<ul role="list" className="-my-5 divide-y divide-ui-gray-light">
<div className="flow-root">
<ul role="list" className="divide-y divide-ui-gray-light">
{submission.pages.map((page) =>
page.elements?.map(
(element) =>
@@ -33,7 +33,7 @@ export default function SubmissionDisplay({ formId, submissionSession }) {
<p
className={classNames(
element.value ? "text-gray-600" : "text-gray-400",
"mt-1 text-sm text-gray-600 line-clamp-2"
"pt-1 text-sm text-gray-600 line-clamp-2"
)}
>
{element.value || "[not provided]"}