Adding styling

src/core/client/stream/components/App.css

@@ -14,3 +14,7 @@
 .root {
   width: 100%;
 }
+
+.tabContent {
+  padding-top: var(--spacing-unit);
+}

src/core/client/stream/components/App.tsx

@@ -30,7 +30,7 @@ const App: StatelessComponent<AppProps> = props => {
         <Tab tabId="COMMENTS">Comments</Tab>
         <Tab tabId="PROFILE">My Profile</Tab>
       </TabBar>
-      <TabContent activeTab={props.activeTab}>
+      <TabContent activeTab={props.activeTab} className={styles.tabContent}>
         <TabPane tabId="COMMENTS">
           <CommentsPaneContainer />
         </TabPane>

src/core/client/stream/components/HTMLContent.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import dompurify from "dompurify";
 import React, { StatelessComponent } from "react";
 
@@ -5,11 +6,15 @@ import styles from "./HTMLContent.css";
 
 interface HTMLContentProps {
   children: string;
+  className?: string;
 }
 
-const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
+const HTMLContent: StatelessComponent<HTMLContentProps> = ({
+  children,
+  className,
+}) => (
   <div
-    className={styles.root}
+    className={cn(styles.root, className)}
     dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
   />
 );

src/core/client/stream/tabs/profile/components/HistoryComment.css

@@ -9,4 +9,9 @@
 
 .sideBar {
   min-width: 180px;
+  padding-left: var(--spacing-unit);
+}
+
+.body {
+  word-break: break-all;
 }

src/core/client/stream/tabs/profile/components/HistoryComment.tsx

@@ -27,10 +27,12 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
       <Flex direction="row" justifyContent="space-between">
         <Typography variant="bodyCopy" container="div">
           {props.comment.body && (
-            <HTMLContent>{props.comment.body}</HTMLContent>
+            <HTMLContent className={styles.body}>
+              {props.comment.body}
+            </HTMLContent>
           )}
         </Typography>
-        <HorizontalGutter className={styles.sideBar}>
+        <Flex className={styles.sideBar} direction="column">
           <Flex direction="row" alignItems="center" itemGutter="half">
             <ButtonIcon className={styles.icon}>launch</ButtonIcon>
             <Localized id="profile-historyComment-viewConversation">
@@ -47,7 +49,7 @@ const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
             <ButtonIcon className={styles.icon}>schedule</ButtonIcon>
             <Timestamp>{props.comment.createdAt}</Timestamp>
           </Flex>
-        </HorizontalGutter>
+        </Flex>
       </Flex>
       {!!props.comment.replyCount && (
         <Flex

src/core/client/ui/components/Tabs/TabContent.tsx

@@ -5,10 +5,14 @@ export interface TabContentProps {
    * Active tab id/name
    */
   activeTab?: string;
+  /**
+   * classNames
+   */
+  className?: string;
 }
 
 const TabContent: StatelessComponent<TabContentProps> = props => {
-  const { children, activeTab } = props;
+  const { children, activeTab, className } = props;
   return (
     <>
       {React.Children.toArray(children)
@@ -18,6 +22,7 @@ const TabContent: StatelessComponent<TabContentProps> = props => {
         .map((child: React.ReactElement<any>, i) =>
           React.cloneElement(child, {
             tabId: child.props.tabId ? child.props.tabId : i,
+            className,
           })
         )}
     </>