more fixes as per comments from @LianaHus

libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

@@ -33,7 +33,7 @@ export default function AIStatus(props: AIStatusProps) {
   return (
     <div className="d-flex flex-row pr-2 text-white justify-content-center align-items-center">
       <span className={copilotActive === false ? "fa-regular fa-microchip-ai ml-1 text-danger" : "fa-regular fa-microchip-ai ml-1"}></span>
-      <span className={copilotActive === false ? "small mx-1 text-danger" : "small mx-1" }>Remix Copilot</span>
+      <span className={copilotActive === false ? "small mx-1 text-danger semi-bold" : "small mx-1 semi-bold" }>Remix Copilot</span>
     </div>
   )
 }

libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx

@@ -11,11 +11,11 @@ export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertS
 
   return (
     <>
-      <div className="mr-2" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
-        <span className="pr-2 far fa-exclamation-triangle" style={{ color: '#ff8559' }}></span>
-        <label className="text-white font-semibold">
+      <div className="mr-2 d-flex align-items-center justify-content-center" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
+        <span className="pr-2 far fa-exclamation-triangle text-danger"></span>
+        <span className="text-white font-semibold small">
           <FormattedMessage id="home.scamAlert" />
-        </label>
+        </span>
       </div>
     </>
   )

libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx

@@ -17,19 +17,19 @@ export default function ScamDetails ({ refs, floatStyle, scamAlerts }: ScamDetai
   return (
     <div
       ref={refs.setFloating}
-      style={floatStyle}
-      className="py-2 ml-1 mb-1 mb-2 d-flex w-25 bg-danger border border-danger"
+      style={ floatStyle }
+      className="py-2 ml-1 mb-1 mb-2 d-flex w-25 alert alert-danger border border-danger"
     >
       <span className="align-self-center pl-4 mt-1">
-        <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter', color: 'orange' }} className="pr-2 far fa-exclamation-triangle"></i>
+        <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 far text-danger fa-exclamation-triangle"></i>
       </span>
-      <div className="d-flex flex-column text-white">
+      <div className="d-flex flex-column text-danger">
         {scamAlerts && scamAlerts.map((alert, index) => (
           <span className="pl-4 mt-1" key={`${alert.url}${index}`}>
             {alert.url.length < 1 ? <FormattedMessage id={`home.scamAlertText${index + 1}`} defaultMessage={alert.message} />
               : (<><FormattedMessage id={`home.scamAlertText${index + 1}`} defaultMessage={alert.message} /> : &nbsp;
                 <a
-                  className={`remixui_home_text text-white ${index === 1 ? 'pl-2' : ''}`}
+                  className={`remixui_home_text text-danger ${index === 1 ? 'pl-2' : ''}`}
                   onClick={() => {
                     index === 1 && _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])
                     index === 2 && _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -3,7 +3,7 @@ import GitStatus from './components/gitStatus'
 import AIStatus from './components/aiStatus'
 import ScamAlertStatus from './components/scamAlertStatus'
 import ScamDetails from './components/scamDetails'
-import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
+import { FloatingFocusManager, autoUpdate, flip, offset, shift, size, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
 import axios from 'axios'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
@@ -25,7 +25,17 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
   const { refs, context, floatingStyles } = useFloating({
     open: showScamDetails,
     onOpenChange: setShowScamDetails,
-    middleware: [offset(10), flip({ fallbackAxisSideDirection: 'end' }), shift()],
+    middleware: [offset(10), flip({ fallbackAxisSideDirection: 'end' }), shift({
+      mainAxis: true, padding: 10
+    }), size({
+      apply({ availableWidth, availableHeight, elements, ...state }) {
+        console.log(state)
+        Object.assign(elements.floating.style, {
+          maxWidth: `${availableWidth}`,
+          maxHeight: `auto`
+        })
+      }
+    })],
     whileElementsMounted: autoUpdate,
   })
   const click = useClick(context)
@@ -58,7 +68,7 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
     <>
       {showScamDetails && (
         <FloatingFocusManager context={context} modal={false}>
-          <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: '300px', alignContent: 'center', paddingRight: '5px' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
+          <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: 'auto', alignContent: 'center', paddingRight: '0.5rem' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
         </FloatingFocusManager>
       )}
       <div className="d-flex remixui_statusbar_height flex-row bg-primary justify-content-between align-items-center">