fixes for new query side panel (#8288)

frontend/components/FleetMarkdown/FleetMarkdown.tsx

@@ -50,7 +50,7 @@ const FleetMarkdown = ({ markdown, className }: IFleetMarkdownProps) => {
         },
 
         // Overrides code display to use FleetAce with Readonly overrides.
-        code: ({ children }) => {
+        code: ({ inline, children, ...props }) => {
           const onEditorBlur = (editor?: IAceEditor) => {
             editor && editor.clearSelection();
           };
@@ -64,6 +64,14 @@ const FleetMarkdown = ({ markdown, className }: IFleetMarkdownProps) => {
             editor.renderer.visualizeFocus = noop;
           };
 
+          // Dont render the fleet ace code block for simple inline code blocks.
+          // e.g. `x = 1`
+          if (inline) {
+            return <code {...props}>{children}</code>;
+          }
+
+          // full code blocks we want to use Fleet Ace.
+          // e.g. ```SELECT * FROM USERS```
           return (
             <FleetAce
               wrapperClassName={`${baseClass}__ace-display`}

frontend/components/side_panels/QuerySidePanel/QueryTableColumns/ColumnListItem/_styles.scss

@@ -15,6 +15,14 @@
 
   &__name {
     font-size: $x-small;
+
+    // We need to wrap on really long column names so we override some
+    // TooltipWrapper styles here.
+    .component__tooltip-wrapper__element {
+      white-space: normal;
+      max-width: 180px;
+      overflow-wrap: anywhere;
+    }
   }
 
   // this is to override the tooltip text style from TooltipWrapper. When we

frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/QueryTablePlatforms.tsx

@@ -26,11 +26,14 @@ interface IQueryTablePlatformsProps {
   platforms: IPlatformsWithFreebsd[];
 }
 
+const PLATFORM_ORDER = ["darwin", "windows", "linux"];
+
 const baseClass = "query-table-platforms";
 
 const QueryTablePlatforms = ({ platforms }: IQueryTablePlatformsProps) => {
   const platformListItems = platforms
     .filter((platform) => platform !== "freebsd")
+    .sort((a, b) => PLATFORM_ORDER.indexOf(a) - PLATFORM_ORDER.indexOf(b))
     .map((platform) => {
       return (
         <PlatformListItem