From 0a5e6f725058cb7b13f6e1c116c3770f0afd3388 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 00:16:00 +0200
Subject: [PATCH] Styling improvements and responsibility

---
 .../stream/components/PermalinkButton/PermalinkButton.css    | 5 +++++
 .../stream/components/PermalinkButton/PermalinkButton.tsx    | 2 ++
 .../stream/components/PermalinkButton/PermalinkPopover.css   | 2 +-
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/stream/components/PermalinkButton/PermalinkButton.css

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 {