From 600b3e4b3e87b95a1b53373af2de185ea3bd28d2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 14 Dec 2022 08:46:35 -0500
Subject: [PATCH] fix: Small tweaks/fixes to custom domain UI

---
 app/components/Popover.tsx                    |  3 +-
 .../Document/components/SharePopover.tsx      | 52 ++++++++++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx
index 254fff847..275582850 100644
--- a/app/components/Popover.tsx
+++ b/app/components/Popover.tsx
@@ -45,7 +45,8 @@ const Contents = styled.div<{ $shrink?: boolean; $width?: number }>`
   background: ${(props) => props.theme.menuBackground};
   border-radius: 6px;
   padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
-  max-height: 50vh;
+  max-height: 75vh;
+  overflow-x: hidden;
   overflow-y: auto;
   box-shadow: ${(props) => props.theme.menuShadow};
   width: ${(props) => props.$width}px;
diff --git a/app/scenes/Document/components/SharePopover.tsx b/app/scenes/Document/components/SharePopover.tsx
index d64a3f56e..7aa407c26 100644
--- a/app/scenes/Document/components/SharePopover.tsx
+++ b/app/scenes/Document/components/SharePopover.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import slugify from "slugify";
 import styled from "styled-components";
 import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
 import Document from "~/models/Document";
@@ -255,31 +256,6 @@ function SharePopover({
 
       {expandedOptions && (
         <>
-          <Separator />
-          <SwitchWrapper>
-            <Input
-              type="text"
-              label={t("Custom link")}
-              onChange={handleUrlSlugChange}
-              error={slugValidationError}
-              defaultValue={urlSlug}
-            />
-            {!slugValidationError && urlSlug && (
-              <DocumentLinkPreviewWrapper>
-                <DocumentLinkPreview type="secondary" size="small">
-                  <Trans>The document will be available at</Trans>
-                  <br />
-                  <a
-                    href={urlSlug ? `${team.url}/s/${urlSlug}` : ""}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {urlSlug ? `${team.url}/s/${urlSlug}` : ""}
-                  </a>
-                </DocumentLinkPreview>
-              </DocumentLinkPreviewWrapper>
-            )}
-          </SwitchWrapper>
           <Separator />
           <SwitchWrapper>
             <Switch
@@ -302,6 +278,32 @@ function SharePopover({
               </SwitchText>
             </SwitchLabel>
           </SwitchWrapper>
+          <Separator />
+          <SwitchWrapper>
+            <Input
+              type="text"
+              label={t("Custom link")}
+              placeholder={slugify(document.titleWithDefault.toLowerCase())}
+              onChange={handleUrlSlugChange}
+              error={slugValidationError}
+              defaultValue={urlSlug}
+            />
+            {!slugValidationError && (
+              <DocumentLinkPreviewWrapper>
+                <DocumentLinkPreview type="secondary">
+                  <Trans>The document will be available at</Trans>
+                  <br />
+                  <a
+                    href={`${team.url}/s/${urlSlug || share?.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {`${team.url}/s/${urlSlug || share?.id}`}
+                  </a>
+                </DocumentLinkPreview>
+              </DocumentLinkPreviewWrapper>
+            )}
+          </SwitchWrapper>
         </>
       )}