diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
new file mode 100644
index 000000000..b79c5939d
--- /dev/null
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
@@ -0,0 +1,5 @@
+.popover {
+  width: 350px;
+  max-width: 80%;
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index 339e1780a..b7f722b11 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { oncePerFrame } from "talk-common/utils";
 import { Button, ButtonIcon, ClickOutside, Popover } from "talk-ui/components";
 
+import * as styles from "./PermalinkButton.css";
 import PermalinkPopover from "./PermalinkPopover";
 
 interface PermalinkProps {
@@ -27,6 +28,7 @@ class Permalink extends React.Component<PermalinkProps> {
         id={popoverID}
         placement="top-start"
         description="A dialog showing a permalink to the comment"
+        className={styles.popover}
         body={({ toggleVisibility }) => (
           <ClickOutside
             onClickOutside={() =>
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
index e6cb4ee63..c2afa31b2 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -1,5 +1,5 @@
 .root {
-  width: 300px;
+  width: 100%;
 }
 
 .textField {