popover z-index, alert bar overflow

frontend/src/modules/dashboard/Dashboard.tsx

@@ -34,7 +34,7 @@ export const Dashboard: React.FC = () => {
     <div className="relative">
       <UpdateAlert sysInfo={sysInfo.sysInfo} />
       <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
-        <div className="mt-6 pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+        <div className="mt-6 pb-5 border-b border-gray-200 flex items-center justify-between">
           <h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
           <div className="system-status text-xs font-medium text-gray-500 flex flex-col gap-2">
             <div className="flex items-center gap-1">

frontend/src/modules/dashboard/components/UpdateAlert/UpdateAlert.tsx

@@ -10,11 +10,11 @@ export const UpdateAlert = (sysInfo: SysInfoState) => {
 
   const updateAlert = (status: string) =>
     status === 'imminent' ? (
-      <div className="update-alert w-full h-5 py-3 bg-yellow-100 flex items-center justify-center text-xs font-medium text-gray-500 gap-2">
-        <LightningBoltIcon className="h-4 w-4 text-primary-800" />
-        <p>Attention: your Stackspin instance will be updated in the next 24 hours. </p>
+      <div className="update-alert w-full md:h-5 h-12 md:py-3 px-5 bg-yellow-100 flex items-center justify-center text-xs font-medium text-gray-500 gap-2">
+        <LightningBoltIcon className="h-4 w-4 flex-none text-primary-800" />
+        <span className="py-3">Attention: your Stackspin instance will be updated in the next 24 hours. </span>
         <a
-          className="hover:text-primary-500 underline"
+          className="hover:text-primary-500 underline py-3"
           href={sysInfo.sysInfo.releaseNotesUrl}
           target="_blank"
           rel="noreferrer noopener"
@@ -24,7 +24,7 @@ export const UpdateAlert = (sysInfo: SysInfoState) => {
       </div>
     ) : status === 'updated' ? (
       <div className="update-alert w-full h-5 py-3 bg-primary-200 flex items-center justify-center text-xs font-medium text-primary-700 gap-2">
-        <SparklesIcon className="h-4 w-4 text-primary-800" />
+        <SparklesIcon className="h-4 w-4 flex-none text-primary-800" />
         <p>Your Stackspin just got an update!</p>
         <a
           className="hover:text-primary-500 underline"

frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx

@@ -63,8 +63,9 @@ export const VersionInfo = (sysInfo: SysInfoState) => {
         leave="transition ease-in duration-75"
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
+        className="z-10"
       >
-        <Popover.Panel className="absolute z-10 origin-top-right right-0 top-5 mt-2  rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Popover.Panel className="absolute z-10 top-5 mt-2 right-0 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="flex flex-col items-stretch p-4 w-60 divide-y divide-gray-100 text-xs text-gray-500">
             {updatesText}
             <div className="px-4 py-2 flex items-center gap-1">