sidebar and comment fixes

front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx

@@ -25,7 +25,7 @@ const Sidebar: FC<Props> = ({
 }) => {
   if (layout === "mobile") {
     return (
-      <div className="lg:hidden">
+      <section className="lg:hidden">
         <div className="flex flex-col items-start gap-4 self-stretch border-t border-gray-300 pt-4 @container dark:border-gray-300-dark">
           <SidebarQuestionInfo postData={postData} />
           <SidebarQuestionTags
@@ -44,12 +44,12 @@ const Sidebar: FC<Props> = ({
         <Suspense fallback={null}>
           <SimilarQuestions post_id={postData.id} />
         </Suspense>
-      </div>
+      </section>
     );
   }
 
   return (
-    <div className="hidden w-80 shrink-0 border border-transparent bg-gray-0 p-4 text-gray-700 dark:border-blue-200-dark dark:bg-gray-0-dark dark:text-gray-700-dark lg:block">
+    <section className="hidden h-fit w-80 shrink-0 border border-transparent bg-gray-0 p-4 text-gray-700 dark:border-blue-200-dark dark:bg-gray-0-dark dark:text-gray-700-dark lg:block">
       <div className="mb-4 flex w-full items-center justify-between gap-2 border-b border-gray-300 pb-4 dark:border-gray-300-dark">
         <div className="flex gap-1">
           <PostSubscribeButton post={postData} />
@@ -81,7 +81,7 @@ const Sidebar: FC<Props> = ({
       <Suspense fallback={null}>
         <SimilarQuestions post_id={postData.id} />
       </Suspense>
-    </div>
+    </section>
   );
 };
 

front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx

@@ -16,7 +16,9 @@ const fetchArticles = async (postId: number) => {
 const NewsMatch: FC<Props> = async ({ questionId }) => {
   const articles = await fetchArticles(questionId);
 
-  return <NewsMatchDrawer articles={articles} questionId={questionId} />;
+  if (articles.length > 0) {
+    return <NewsMatchDrawer articles={articles} questionId={questionId} />;
+  }
 };
 
 export default NewsMatch;

front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx

@@ -30,18 +30,16 @@ const NewsMatchDrawer: FC<Props> = ({ questionId, articles }) => {
           />
         ))}
         <div className="flex flex-col items-center justify-between @md:flex-row">
-          {articles.length > articleDisplayLimit ? (
+          {articles.length > articleDisplayLimit && (
             <Button
               variant="tertiary"
               className="mb-4"
               onClick={() => setArticleDisplayLimit((prev) => prev + 5)}
             >
               {t("showMoreNews")}
             </Button>
-          ) : (
-            <div />
           )}
-          <div className="my-auto size-fit pr-2 text-sm leading-4 text-gray-900 dark:text-gray-900-dark">
+          <div className="size-fit pr-2 text-sm leading-4 text-gray-900 dark:text-gray-900-dark">
             {t.rich("learnMoreAboutNewsMatch", {
               link: (chunks) => (
                 <Link

front_end/src/components/comment_feed/comment_editor.tsx

@@ -104,7 +104,7 @@ const CommentEditor: FC<CommentEditorProps> = ({
         <IncludedForecast author="test" forecastValue={test} />
       )*/}
       {isEditing && (
-        <div className="flex flex-col">
+        <div className="border border-gray-500 dark:border-gray-500-dark">
           <MarkdownEditor
             key={rerenderKey}
             mode="write"
@@ -115,7 +115,7 @@ const CommentEditor: FC<CommentEditorProps> = ({
       )}
       {!isEditing && <MarkdownEditor mode="read" markdown={markdown} />}
 
-      <div className="flex items-center justify-end gap-3">
+      <div className="my-4 flex items-center justify-end gap-3">
         <Checkbox
           checked={isPrivateComment}
           onChange={(checked) => {
@@ -144,9 +144,9 @@ const CommentEditor: FC<CommentEditorProps> = ({
         </Button>
       </div>
       {!!errorMessage && (
-        <p className="text-end text-red-500 dark:text-red-500-dark">
+        <div className="text-end text-red-500 dark:text-red-500-dark">
           {errorMessage}
-        </p>
+        </div>
       )}
     </>
   );

front_end/src/components/comment_feed/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
@@ -72,6 +73,26 @@ type Props = {
   profileId?: number;
 };
 
+function shouldIncludeForecast(postData: PostWithForecasts | undefined) {
+  if (postData === undefined) return false;
+
+  // disable forecasts for notebooks
+  if (postData.notebook !== undefined) {
+    return false;
+  }
+
+  // we can link forecast only for date, binary and numeric questions
+  if (postData.question) {
+    if (postData.question.type === QuestionType.MultipleChoice) {
+      return false;
+    }
+
+    return !!postData.question.my_forecasts?.history.length;
+  }
+
+  return false;
+}
+
 const COMMENTS_PER_PAGE = 10;
 
 const CommentFeed: FC<Props> = ({ postData, postPermissions, profileId }) => {
@@ -240,7 +261,7 @@ const CommentFeed: FC<Props> = ({ postData, postPermissions, profileId }) => {
         >
           {t("comments")}
         </h2>
-        {profileId && (
+        {!profileId && user && (
           <ButtonGroup
             value={feedSection}
             buttons={feedOptions}
@@ -312,24 +333,4 @@ const CommentFeed: FC<Props> = ({ postData, postPermissions, profileId }) => {
   );
 };
 
-function shouldIncludeForecast(postData: PostWithForecasts | undefined) {
-  if (postData === undefined) return false;
-
-  // disable forecasts for notebooks
-  if (postData.notebook !== undefined) {
-    return false;
-  }
-
-  // we can link forecast only for date, binary and numeric questions
-  if (postData.question) {
-    if (postData.question.type === QuestionType.MultipleChoice) {
-      return false;
-    }
-
-    return !!postData.question.my_forecasts?.history.length;
-  }
-
-  return false;
-}
-
 export default CommentFeed;