Fix date column width and >33 label color

app/src/components/data/DegreeDay/index.tsx

@@ -48,7 +48,7 @@ const DegreeDay: FC<DegreesProps> = () => {
       <table className={classes.table}>
         <thead>
           <tr>
-            <th className={classes.cell}>Temporada</th>
+            <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
             <td className={classes.cell}>Octubre</td>
             <td className={classes.cell}>Noviembre</td>
             <td className={classes.cell}>Diciembre</td>

app/src/components/data/GeneralPerSeason/index.tsx

@@ -21,7 +21,7 @@ const TemperaturePerSeason: FC = () => {
 
   const rows = data?.map((x) => (
     <tr key={x.initial_date}>
-      <th className={classes.cell}>
+      <th className={`${classes.cell} ${classes.nowrap}`}>
         {campString(x.initial_date, x.final_date)}
       </th>
       <TdGroup>

app/src/components/data/Precipitation/index.tsx

@@ -50,7 +50,7 @@ const Precipitation: FC<PrecipitationProps> = () => {
       <table className={classes.table}>
         <thead>
           <tr>
-            <th className={classes.cell}>Temporada</th>
+            <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
             <td className={classes.cell}>Octubre</td>
             <td className={classes.cell}>Noviembre</td>
             <td className={classes.cell}>Diciembre</td>

app/src/components/data/shared.tsx

@@ -19,7 +19,7 @@ export const TableHeader: FC<tableHeaderProps> = ({
 }) => {
   return (
     <thead>
-      <th className={classes.cell}>Temporada</th>
+      <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
       <td style={{ padding: "0" }} className={classes.cell}>
         <table style={{ width: "100%" }}>
           <tr>
@@ -30,7 +30,7 @@ export const TableHeader: FC<tableHeaderProps> = ({
             <td style={{ backgroundColor: orangeScale([])(1).css() }}>
               &gt;30%
             </td>
-            <td style={{ backgroundColor: redScale([])(1).css() }}>&gt;33%</td>
+            <td style={{ backgroundColor: redScale([])(1).css(), color: "white" }}>&gt;33%</td>
           </tr>
         </table>
       </td>

app/src/components/data/tables.module.css

@@ -4,6 +4,7 @@
    * */
   height: 1px;
   width: 100%;
+  table-layout: fixed;
 }
 
 .table * {
@@ -30,3 +31,11 @@
   padding: 5px 10px;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.dateCell {
+  width: 17%;
+}