Fix: Remove copy button when copying is not supported

web/src/components/DocumentControlButtons.tsx

@@ -28,6 +28,9 @@ export default function DocumentControlButtons(props: Props): JSX.Element {
   const [shareModalUseLatest, setShareModalUseLatest] = useState<boolean>(false)
   const [shareModalHideUi, setShareModalHideUi] = useState<boolean>(false)
 
+  // Cannot copy when page is served over HTTP
+  const canCopy = navigator.clipboard !== undefined
+
   const getShareUrl = (): string => {
     // adapt the current URL so we can leave Docs.tsx's state as refs
     // (which means if the page was passed down as a prop it wouldn't update correctly)
@@ -97,18 +100,20 @@ export default function DocumentControlButtons(props: Props): JSX.Element {
         <div className={styles['share-modal']}>
           <div className={styles['share-modal-link-container']}>
             <p className={styles['share-modal-link']}>{getShareUrl()}</p>
-            <div className={styles['share-modal-copy-container']}>
-              <button
-                className={styles['share-modal-copy']}
-                onClick={() => {
-                  void (async () => {
-                    await navigator.clipboard.writeText(getShareUrl())
-                  })()
-                }}
-              >
-                Copy
-              </button>
-            </div>
+            {canCopy && (
+              <div className={styles['share-modal-copy-container']}>
+                <button
+                  className={styles['share-modal-copy']}
+                  onClick={() => {
+                    void (async () => {
+                      await navigator.clipboard.writeText(getShareUrl())
+                    })()
+                  }}
+                >
+                  Copy
+                </button>
+              </div>
+            )}
           </div>
 
           <FormGroup>

web/src/style/components/DocumentControlButtons.module.css

@@ -86,6 +86,7 @@
   -moz-user-select: all;
   -webkit-user-select: all;
   font-size: small;
+  width: 100%;
 }
 
 .share-modal-copy-container {
@@ -131,6 +132,10 @@
     align-items: center;
   }
 
+  .share-modal-link {
+    width: auto;
+  }
+
   .share-modal-copy-container {
     margin-left: 0;
     margin-top: 1rem;