Added mobile breakpoints

Author: MarcBaeuerle

frontend/src/App.tsx

@@ -32,7 +32,7 @@ function App() {
 
   return (
     <>
-      <header className='h-28 2xl:h-32 pl-12 p-4 flex gap-10'>
+      <header className='h-20 md:h-28 2xl:h-32 pl-12 p-4 flex gap-10'>
         <a href='https://hpi.de/'>
           <img src={hpiLogo} className='h-full hover:scale-105 duration-200' />
         </a>
@@ -41,7 +41,7 @@ function App() {
           <img src={desLogo} className='h-full hover:scale-105 duration-200' />
         </a>
       </header>
-      <main className='w-full px-10 max-w-[2000px] mx-auto relative flex flex-col gap-8'>
+      <main className='w-full px-3 sm:px-10 max-w-[2000px] mx-auto relative flex flex-col gap-8'>
         <section className='flex flex-col justify-center py-4 gap-2'>
           <h1 className='text-3xl text-center font-medium'>TCO<sub>2</sub>: Total CO<sub>2</sub> Cost of Ownership</h1>
           <h2 className='text-lg text-center font-light text-slate-600'>Analyzing the Carbon Footprint of Database Server Replacements</h2>
@@ -60,7 +60,7 @@ function App() {
             </p>
           </div>
         </section>
-        <section className='grid grid-cols-1 lg:grid-cols-2 gap-10'>
+        <section className='grid grid-cols-1 xl:grid-cols-2 gap-10'>
           <div className='col-span-1 flex flex-col gap-8'>
             <Sections title='Server Configurations' markup={<Compare />} />
             <Sections title='Benchmark Settings' markup={<BenchmarkSettings />} />

frontend/src/partials/BenchmarkSettings.tsx

@@ -138,7 +138,7 @@ function BenchmarkSettings() {
 
 return (
   <div className="flex z-30 flex-col text-medium font-medium flex-wrap px-4 py-2 gap-4">
-    <div className="grid grid-cols-7 space-x-4">
+    <div className="flex flex-col gap-4 md:grid grid-cols-7 space-x-4">
       <div className="flex flex-col col-span-5 gap-5">
         <ToggleSelection<WorkloadType>
           label="Workload:"
@@ -177,7 +177,7 @@ return (
               />
           }
       </div>
-      <div className="flex font-normal gap-2 flex-col col-span-2">
+      <div className="flex font-normal gap-2 flex-col sm:flex-row md:flex-col col-span-2">
         <ListItemWithSearch
           label="Location"
           value={country}

frontend/src/partials/Compare.tsx

@@ -190,11 +190,11 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
         <p className="text-6xl text-slate-500 group-hover:text-slate-400 duration-150">+</p>
       </div>
       <div className="flex justify-between">
-        <p className="text-medium font-medium">{label}</p>
+        <p className="text-medium text-center md:text-left w-full font-medium">{label}</p>
         <button
           hidden={!canToggle}
           onClick={toggleShow}
-          className="w-fit px-2 cursor-pointer hover:text-red-600 duration-200 scale-110 hover:scale-125"
+          className="w-fit px-2 absolute right-0 cursor-pointer hover:text-red-600 duration-200 scale-110 hover:scale-125"
         >
           <img 
             src={close} 
@@ -204,7 +204,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
       <ServerPresetsComponent {...{ presetValue, updateComponent, setAdvancedOptions, setAdvancedSettings }} />
       <div className={`${showDropdown ? 'opacity-100' : 'opacity-0 pointer-events-none'} relative duration-150`}>
         <select
-          className="block appearance-none text-base w-full bg-gray-100 border-2 border-gray-400 py-1 px-2 pr-8 rounded focus:outline-none focus:bg-white focus:border-gray-500"
+          className="block appearance-none w-full bg-gray-100 border-2 border-gray-400 py-1 px-2 pr-8 rounded focus:outline-none focus:bg-white focus:border-gray-500"
           value={thisServer.cpu}
           onChange={(e) => updateComponent({cpu: (e.target.value)})}
         >
@@ -279,7 +279,7 @@ function Compare() {
 
   return (
     <>
-      <div className="grid grid-cols-2 px-4 py-2 gap-5">
+      <div className="grid grid-cols-1 md:grid-cols-2 px-4 py-2 gap-5">
         <Dropdown
           label={OLD_LABEL}
           showAdvanced={advancedSettings}

frontend/src/utility/ListItems.tsx

@@ -7,7 +7,7 @@ interface ListItemProps {
 
 export const ListItem: React.FC<ListItemProps> = ({ label, value, borderColor }) => {
   return (
-    <li style={{borderColor: borderColor }} className={`border-2 rounded-lg flex flex-col items-start justify-start px-3 py-2 duration-200 ease-in-out`}>
+    <li style={{borderColor: borderColor }} className={`grow border-2 rounded-lg flex flex-col items-start justify-start px-3 py-2 duration-200 ease-in-out`}>
       <p className="text-base font-semibold flex flex-col text-wrap">
         {label}
       </p>