diff --git a/frontend/src/modules/dashboard/Dashboard.tsx b/frontend/src/modules/dashboard/Dashboard.tsx index 434686102b0d1f33821ee52e3743fb74dda106ce..9bf8acbc12dde01260ca89001aaf8f7244c897e5 100644 --- a/frontend/src/modules/dashboard/Dashboard.tsx +++ b/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"> diff --git a/frontend/src/modules/dashboard/components/UpdateAlert/UpdateAlert.tsx b/frontend/src/modules/dashboard/components/UpdateAlert/UpdateAlert.tsx index 9d05bcaeb124a5db50ee6925c18daa30114f3fcb..bd9f11fc5771da152abede150d5d542bb9d20fc8 100644 --- a/frontend/src/modules/dashboard/components/UpdateAlert/UpdateAlert.tsx +++ b/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" diff --git a/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx b/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx index 20e6246bf9fa1c5aef879b2b7d2a1e7dd9eb9a1d..254a97fc6b3e81d5dba01034f833b4ec88d090ef 100644 --- a/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx +++ b/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">