Doceditor:CompletedForm Fixed scroll and styles

packages/doceditor/src/components/completed-form/CompletedForm.styled.ts

@@ -27,33 +27,61 @@
 
 import styled from "styled-components";
 
-import { mobile } from "@docspace/shared/utils";
+import { mobile, mobileMore } from "@docspace/shared/utils";
 
 import type { CompletedFormLayoutProps } from "./CompletedForm.types";
 
-export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
+export const ContainerCompletedForm = styled.section<CompletedFormLayoutProps>`
   box-sizing: border-box;
 
   * {
     box-sizing: border-box;
   }
 
-  width: 100%;
-  min-height: 100dvh;
-  padding: 100px 16px 16px;
-
   background-image: ${(props) => props.bgPattern};
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
 
+  width: 100%;
+  min-height: 100dvh;
+  height: 100%;
+
+  .scroller {
+    > .scroll-body {
+      display: flex;
+      flex-direction: column;
+      padding-inline-end: 16px !important;
+    }
+  }
+
+  .completed-form__default-layout {
+    padding: clamp(42px, 8vh, 100px) 16px 16px;
+
+    picture {
+    }
+  }
+
+  @media ${mobile} {
+    .completed-form__default-layout {
+      padding: 0px 16px 16px;
+    }
+
+    background-image: none;
+  }
+`;
+
+export const CompletedFormLayout = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  padding: clamp(42px, 8vh, 100px) 0px 16px 16px;
+
   picture {
-    margin-bottom: clamp(40px, 10vh, 125px);
+    margin-bottom: clamp(40px, 8vh, 125px);
+    user-select: none;
   }
 
   .link {
@@ -68,9 +96,14 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
     margin-top: 24px;
   }
 
-  @media ${mobile} {
-    background-image: none;
+  @media ${mobileMore} and (max-height: 650px) {
+    padding-top: 42px;
+    .completed-form__logo {
+      margin-bottom: 40px;
+    }
+  }
 
+  @media ${mobile} {
     padding-top: 0px;
 
     .completed-form__icon {
@@ -95,6 +128,11 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
         align-self: center;
       }
     }
+
+    .completed-form__empty {
+      gap: 20px;
+      margin-top: 24px;
+    }
   }
 `;
 

packages/doceditor/src/components/completed-form/CompletedForm.tsx

@@ -69,9 +69,11 @@ import {
   FormNumberWrapper,
   ManagerWrapper,
   MainContent,
+  ContainerCompletedForm,
 } from "./CompletedForm.styled";
 
 import type { CompletedFormProps } from "./CompletedForm.types";
+import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 export const CompletedForm = ({
   session,
@@ -92,25 +94,29 @@ export const CompletedForm = ({
 
   if (!session)
     return (
-      <CompletedFormLayout bgPattern={bgPattern}>
-        <picture className="completed-form__logo">
-          <source media={mobile} srcSet={smallLogoUrl} />
-          <source media={mobileMore} srcSet={logoUrl} />
-          <img src={logoUrl} alt="logo" />
-        </picture>
-        <Image
-          priority
-          src={iconUrl}
-          className="completed-form__icon"
-          alt="icon"
-          width={416}
-          height={200}
-        />
-        <TextWrapper className="completed-form__empty">
-          <Heading level={HeadingLevel.h1}>{t("CompletedForm:Title")}</Heading>
-          <Text noSelect>{t("CompletedForm:Description")}</Text>
-        </TextWrapper>
-      </CompletedFormLayout>
+      <ContainerCompletedForm bgPattern={bgPattern}>
+        <CompletedFormLayout className="completed-form__default-layout">
+          <picture className="completed-form__logo">
+            <source media={mobile} srcSet={smallLogoUrl} />
+            <source media={mobileMore} srcSet={logoUrl} />
+            <img src={logoUrl} alt="logo" />
+          </picture>
+          <Image
+            priority
+            src={iconUrl}
+            className="completed-form__icon"
+            alt="icon"
+            width={416}
+            height={200}
+          />
+          <TextWrapper className="completed-form__empty">
+            <Heading level={HeadingLevel.h1}>
+              {t("CompletedForm:Title")}
+            </Heading>
+            <Text noSelect>{t("CompletedForm:Description")}</Text>
+          </TextWrapper>
+        </CompletedFormLayout>
+      </ContainerCompletedForm>
     );
 
   const {
@@ -172,85 +178,96 @@ export const CompletedForm = ({
   });
 
   return (
-    <CompletedFormLayout bgPattern={bgPattern}>
-      <picture className="completed-form__logo">
-        <source media={mobile} srcSet={smallLogoUrl} />
-        <source media={mobileMore} srcSet={logoUrl} />
-        <img src={logoUrl} alt="logo" />
-      </picture>
-      <TextWrapper>
-        <Heading level={HeadingLevel.h1}>
-          {t("CompletedForm:FormCompletedSuccessfully")}
-        </Heading>
-        <Text noSelect>
-          {isAnonim
-            ? t("CompletedForm:DescriptionForAnonymous")
-            : t("CompletedForm:DescriptionForRegisteredUser")}
-        </Text>
-      </TextWrapper>
-      <MainContent>
-        <Box className="completed-form__file">
-          <PDFIcon />
-          <Heading className="completed-form__filename" level={HeadingLevel.h5}>
-            {completedForm.title}
-          </Heading>
-          <IconButton
-            size={16}
-            className="completed-form__download"
-            iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
-            onClick={isAnonim ? handleDownload : copyLinkFile}
-          />
-        </Box>
-        <FormNumberWrapper>
-          <span className="label">{t("CompletedForm:FormNumber")}</span>
-          <Box>
-            <Text className="completed-form__form-number">{formNumber}</Text>
-          </Box>
-        </FormNumberWrapper>
-        <ManagerWrapper>
-          <span className="label">{t("CompletedForm:FormOwner")}</span>
-          <Box>
-            <Avatar
-              className="manager__avatar"
-              size={AvatarSize.medium}
-              role={AvatarRole.manager}
-              source={manager.avatar}
-            />
-            <Heading level={HeadingLevel.h3} className="manager__user-name">
-              {decode(manager.displayName)}
+    <ContainerCompletedForm bgPattern={bgPattern}>
+      <Scrollbar fixedSize>
+        <CompletedFormLayout>
+          <picture className="completed-form__logo">
+            <source media={mobile} srcSet={smallLogoUrl} />
+            <source media={mobileMore} srcSet={logoUrl} />
+            <img src={logoUrl} alt="logo" />
+          </picture>
+          <TextWrapper>
+            <Heading level={HeadingLevel.h1}>
+              {t("CompletedForm:FormCompletedSuccessfully")}
             </Heading>
-            <Link
-              className="manager__mail link"
-              href={`mailto:${manager.email}`}
-            >
-              <MailIcon />
-              <span>{manager.email}</span>
-            </Link>
-          </Box>
-        </ManagerWrapper>
-      </MainContent>
-      <ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
-        <Button
-          scale
-          primary
-          size={ButtonSize.medium}
-          label={
-            isAnonim ? t("Common:Download") : t("CompletedForm:CheckReadyForms")
-          }
-          onClick={isAnonim ? handleDownload : gotoCompleteFolder}
-        />
-        {(!isShreFile || isRoomMember) && (
-          <Button
-            scale
-            size={ButtonSize.medium}
-            label={t("CompletedForm:BackToRoom")}
-            onClick={handleBackToRoom}
-          />
-        )}
-      </ButtonWrapper>
-      <Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
-        {t("CompletedForm:FillItOutAgain")}
-      </Link>
-    </CompletedFormLayout>
+            <Text noSelect>
+              {isAnonim
+                ? t("CompletedForm:DescriptionForAnonymous")
+                : t("CompletedForm:DescriptionForRegisteredUser")}
+            </Text>
+          </TextWrapper>
+          <MainContent>
+            <Box className="completed-form__file">
+              <PDFIcon />
+              <Heading
+                className="completed-form__filename"
+                level={HeadingLevel.h5}
+              >
+                {completedForm.title}
+              </Heading>
+              <IconButton
+                size={16}
+                className="completed-form__download"
+                iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
+                onClick={isAnonim ? handleDownload : copyLinkFile}
+              />
+            </Box>
+            <FormNumberWrapper>
+              <span className="label">{t("CompletedForm:FormNumber")}</span>
+              <Box>
+                <Text className="completed-form__form-number">
+                  {formNumber}
+                </Text>
+              </Box>
+            </FormNumberWrapper>
+            <ManagerWrapper>
+              <span className="label">{t("CompletedForm:FormOwner")}</span>
+              <Box>
+                <Avatar
+                  className="manager__avatar"
+                  size={AvatarSize.medium}
+                  role={AvatarRole.manager}
+                  source={manager.avatar}
+                />
+                <Heading level={HeadingLevel.h3} className="manager__user-name">
+                  {decode(manager.displayName)}
+                </Heading>
+                <Link
+                  className="manager__mail link"
+                  href={`mailto:${manager.email}`}
+                >
+                  <MailIcon />
+                  <span>{manager.email}</span>
+                </Link>
+              </Box>
+            </ManagerWrapper>
+          </MainContent>
+          <ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
+            <Button
+              scale
+              primary
+              size={ButtonSize.medium}
+              label={
+                isAnonim
+                  ? t("Common:Download")
+                  : t("CompletedForm:CheckReadyForms")
+              }
+              onClick={isAnonim ? handleDownload : gotoCompleteFolder}
+            />
+            {(!isShreFile || isRoomMember) && (
+              <Button
+                scale
+                size={ButtonSize.medium}
+                label={t("CompletedForm:BackToRoom")}
+                onClick={handleBackToRoom}
+              />
+            )}
+          </ButtonWrapper>
+          <Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
+            {t("CompletedForm:FillItOutAgain")}
+          </Link>
+        </CompletedFormLayout>
+      </Scrollbar>
+    </ContainerCompletedForm>
   );
 };