.

bananashell · Nov 16, 2021 · cceab96 · cceab96
1 parent faa35be
commit cceab96
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -17,24 +17,24 @@ export const Info: FunctionComponent = () => {
     };
 
     return (
-        <article className="relative flex flex-col gap-1 items-end justify-end p-8">
-            <h2 className="text-4xl font-bold">
-                <Link href={"./"}>
-                    <a>Vardagsmaten</a>
-                </Link>
-            </h2>
-            {canShare && (
+        <article className="flex flex-col items-end justify-end gap-1 p-8">
+            {(true || canShare) && (
                 <a
-                    className="absolute right-8 top-8 px-2 py-1 text-white hover:bg-blue-300 bg-blue-400 rounded select-none transition-all"
+                    className="px-2 py-1 mb-auto text-white transition-all bg-blue-400 rounded select-none right-8 top-8 justify-self-start hover:bg-blue-300"
                     href={"javascript:;"}
                     onClick={handleShare}
                 >
                     Dela menyn
                 </a>
             )}
+            <h2 className="text-4xl font-bold">
+                <Link href={"./"}>
+                    <a>Vardagsmaten</a>
+                </Link>
+            </h2>
 
             <i className="text-sm">Skapat av Joakim Jäderberg </i>
-            <div className="grid gap-1 grid-flow-col items-center">
+            <div className="grid items-center grid-flow-col gap-1">
                 <Link href={"https://github.com/bananashell"}>
                     <a className="w-5">
                         <Image

diff --git a/src/components/Recipe.tsx b/src/components/Recipe.tsx
@@ -29,13 +29,13 @@ export const Recipe: FunctionComponent<Props> = ({ weekday, foodId }) => {
             {isLoading && "Loading"}
             {isSuccess && recipe && (
                 <>
-                    <div className="flex flex-grow-0 justify-between">
-                        <h3 className="text-l py-0 lowercase md:text-xl lg:text-2xl">
+                    <div className="flex justify-between flex-grow-0">
+                        <h3 className="py-0 lowercase text-l md:text-xl lg:text-2xl">
                             {weekdayTranslations[weekday]}
                         </h3>
                         <button
                             onClick={() => randomize(weekday)}
-                            className="w-5 h-5 transform rotate-0 hover:rotate-180 transition-all"
+                            className="w-5 h-5 transition-all transform rotate-0 hover:rotate-180"
                         >
                             <Image
                                 src={ReloadIcon}
@@ -48,7 +48,7 @@ export const Recipe: FunctionComponent<Props> = ({ weekday, foodId }) => {
                             />
                         </button>
                     </div>
-                    <h2 className="flex-1 m-0 p-0 text-xl font-bold md:text-3xl lg:text-5xl">
+                    <h2 className="flex-1 p-0 m-0 text-xl font-bold break-word md:text-3xl lg:text-5xl">
                         {recipe.title}
                     </h2>
                     <Links links={recipe.recipe_links} />
@@ -70,9 +70,7 @@ const weekdayStyling: { [weekday in typeof weekdays[number]]: string } = {
 const Container: React.FunctionComponent<{ weekday: typeof weekdays[number] }> =
     ({ children, weekday }) => {
         return (
-            <article
-                className={`container p-7 flex flex-col ${weekdayStyling[weekday]}`}
-            >
+            <article className={`p-7 flex flex-col ${weekdayStyling[weekday]}`}>
                 {children}
             </article>
         );

diff --git a/src/components/RecipeList.tsx b/src/components/RecipeList.tsx
@@ -59,7 +59,7 @@ export const RecipeList: React.FunctionComponent<Props> = ({
 };
 const List: React.FunctionComponent = ({ children }) => {
     return (
-        <div className="grid grid-cols-1 min-w-full h-screen overflow-hidden auto-rows-fr lg:grid-cols-3">
+        <div className="grid min-w-full min-h-screen grid-cols-1 overflow-hidden auto-rows-fr lg:grid-cols-3 lg:h-screen">
             {children}
         </div>
     );