From d3900e39b6f30be690dec3da39e1661587146734 Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Fri, 4 Nov 2022 10:44:36 -0400
Subject: [PATCH] fix comment area display (#7716)

---
 ui/component/commentCreate/view.jsx | 25 -------------------------
 ui/component/commentsList/view.jsx  | 15 ++++++++-------
 ui/component/fileThumbnail/index.js |  2 +-
 ui/scss/component/_card.scss        |  2 +-
 ui/scss/component/_comments.scss    |  6 ++++++
 5 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index afbeac4b6..5f03bfa0f 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -363,31 +363,6 @@ export function CommentCreate(props: Props) {
       .catch(() => {});
   }, [canReceiveFiatTip, claim.claim_id, claim.name, claim.signing_channel, stickerSelector]);
 
-  // LIVESTREAM ONLY - REMOVE
-  // Handle keyboard shortcut comment creation
-  // React.useEffect(() => {
-  //   function altEnterListener(e: SyntheticKeyboardEvent<*>) {
-  //     const inputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
-  //
-  //     if (inputRef && inputRef.current === document.activeElement) {
-  //       // $FlowFixMe
-  //       const isTyping = e.target.attributes['term'];
-  //
-  //       if (((isLivestream && !isTyping) || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
-  //         e.preventDefault();
-  //         buttonRef.current.click();
-  //       }
-  //     }
-  //   }
-  //
-  //   window.addEventListener('keydown', altEnterListener);
-  //
-  //   // removes the listener so it doesn't cause problems elsewhere in the app
-  //   return () => {
-  //     window.removeEventListener('keydown', altEnterListener);
-  //   };
-  // }, [isLivestream]);
-
   // **************************************************************************
   // Render
   // **************************************************************************
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index aab41c2a6..e8b9f0282 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -366,9 +366,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
   const sortButtonProps = { activeSort: sort, changeSort };
 
   return (
-    <>
+    <div className={'comment__actions-row'}>
       {totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
-        <span className="comment__sort">
+        <div className="comment__sort-group">
           <SortButton {...sortButtonProps} label={__('Best')} icon={ICONS.BEST} sortOption={SORT_BY.POPULARITY} />
           <SortButton
             {...sortButtonProps}
@@ -377,11 +377,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
             sortOption={SORT_BY.CONTROVERSY}
           />
           <SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
-        </span>
+        </div>
       )}
-      <div className="button_refresh">
-        <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
-      </div>
+
       {allServers.length >= 2 && (
         <div className="button__selected-server">
           <FormField
@@ -408,7 +406,10 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
           </FormField>
         </div>
       )}
-    </>
+      <div className="button_refresh">
+        <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/component/fileThumbnail/index.js b/ui/component/fileThumbnail/index.js
index 3715be13b..386ea5fe9 100644
--- a/ui/component/fileThumbnail/index.js
+++ b/ui/component/fileThumbnail/index.js
@@ -13,7 +13,7 @@ const select = (state, props) => {
   if (claimUriBeingPlayed) {
     const claim = makeSelectClaimForUri(props.uri)(state);
     const claimBeingPlayed = makeSelectClaimForUri(claimUriBeingPlayed)(state);
-    isBeingPlayed = claim.claim_id === claimBeingPlayed.claim_id;
+    isBeingPlayed = claim && claim.claim_id === claimBeingPlayed.claim_id;
   }
 
   return {
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 6f4e7ce07..5b1bf714f 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -615,7 +615,7 @@
 
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);
-
+    border-bottom: none;
     .button--link {
       font-size: var(--font-xsmall);
       margin: 0px;
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 6c43d9c94..8462574b2 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -45,6 +45,12 @@ $thumbnailWidthSmall: 1rem;
   }
 }
 
+.comment__actions-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .comment {
   width: 100%;
   display: flex;