Update comments

src/viser/client/src/ControlPanel/BottomPanel.tsx

@@ -8,6 +8,7 @@ const BottomPanelContext = React.createContext<null | {
   toggleExpanded: () => void;
 }>(null);
 
+/** A bottom panel is used to display the controls on mobile devices. */
 export default function BottomPanel({
   children,
 }: {
@@ -77,6 +78,7 @@ BottomPanel.Handle = function BottomPanelHandle({
     </Box>
   );
 };
+
 /** Contents of a panel. */
 BottomPanel.Contents = function BottomPanelContents({
   children,

src/viser/client/src/ControlPanel/FloatingPanel.tsx

@@ -24,8 +24,7 @@ const FloatingPanelContext = React.createContext<null | {
   }>;
 }>(null);
 
-/** Root component for control panel. Parents a set of control tabs.
- * This could be refactored+cleaned up a lot! */
+/** A floating panel for displaying controls. */
 export default function FloatingPanel({
   children,
 }: {
@@ -289,7 +288,8 @@ FloatingPanel.Contents = function FloatingPanelContents({
     <Collapse in={context.expanded}>
       <ScrollArea.Autosize mah={context!.maxHeight}>
         <Box
-          /* Prevent internals from getting too wide. */
+          /* Prevent internals from getting too wide. Hardcoded to match the
+           * width of the wrapper element above. */
           w="20em"
         >
           {children}

src/viser/client/src/ControlPanel/SidebarPanel.tsx

@@ -10,8 +10,7 @@ export const SidebarPanelContext = React.createContext<null | {
   toggleCollapsed: () => void;
 }>(null);
 
-/** Root component for control panel. Parents a set of control tabs.
- * This could be refactored+cleaned up a lot! */
+/** A fixed or collapsible side panel for displaying controls. */
 export default function SidebarPanel({
   children,
   collapsible,
@@ -73,7 +72,8 @@ export default function SidebarPanel({
         }}
       >
         <Box
-          /* Prevent DOM reflow, as well as internals from getting too wide. */
+          /* Prevent DOM reflow, as well as internals from getting too wide.
+           * Hardcoded to match the width of the wrapper element above. */
           w="20em"
         >
           {children}