Styling improvements and responsibility

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));
+}

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={() =>

src/core/client/stream/components/PermalinkButton/PermalinkPopover.css

@@ -1,5 +1,5 @@
 .root {
-  width: 300px;
+  width: 100%;
 }
 
 .textField {