Toggle problems by clicking anywhere on the bar (#1150)

Problems bar can now be toggled anywhere on the bar Previously the problems bar could only be toggled by clicking the small icon on the very far right. It would be more pleasant of a user experience to be able to simply click the bar anywhere to toggle it, as it is much quicker and requires less precision.
decompme · Mar 20, 2024 · 3fc0f43 · 3fc0f43
1 parent 66c892f
commit 3fc0f43
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/frontend/src/components/Diff/CompilationPanel.tsx b/frontend/src/components/Diff/CompilationPanel.tsx
@@ -76,12 +76,8 @@ export default function CompilationPanel({ compilation, isCompiling, isCompilati
             >
                 <div className="flex h-full w-full flex-col">
                     <h2 className="flex items-center border-b border-b-gray-5 p-1 pl-3">
-                        <span className="text-sm font-medium">
-                            {(problemState == ProblemState.NO_PROBLEMS) ? "No problems" : "Problems"}
-                        </span>
-                        <div className="grow" />
                         <GhostButton
-                            className="text-gray-11"
+                            className="flex w-max grow justify-between text-gray-11"
                             onClick={() => {
                                 const containerHeight = container.current?.clientHeight ?? 0
                                 const newProblemsHeight = isProblemsCollapsed ? problemsDefaultHeight : problemsCollapsedHeight
@@ -91,6 +87,9 @@ export default function CompilationPanel({ compilation, isCompiling, isCompilati
                                 ])
                             }}
                         >
+                            <span className="text-sm font-medium">
+                                {(problemState == ProblemState.NO_PROBLEMS) ? "No problems" : "Problems"}
+                            </span>
                             {isProblemsCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
                         </GhostButton>
                     </h2>