style(frontend): minor tweaks

frontend/components/Footer.tsx

@@ -6,21 +6,21 @@ import Link from 'next/link';
 const Footer: FC = () => (
     <footer className="footer flex items-center justify-center">
         <div className="container flex flex-wrap items-center justify-center">
-            <div className="flex w-full content-center items-center justify-center xl:w-[25%]">
+            <div className="flex w-full content-center items-center justify-center md:w-1/3 xl:w-1/4">
                 <img
                     src="/images/funded_by_eu.png"
                     alt="european commission logo"
                     className="my-4 mr-3"
                 />
             </div>
-            <div className="text-center xl:w-[25%]">
+            <div className="text-center md:w-1/2 xl:w-1/4">
                 This Service is provided by KIT, co-funded by the{' '}
                 <a href="https://ai4eosc.eu/" rel="noreferrer">
                     AI4EOSC project
                 </a>
                 .
             </div>
-            <div className="flex h-full w-full items-center xl:w-[25%]">
+            <div className="flex h-full w-full items-center md:w-1/3 xl:w-1/4">
                 <ul className={styles['legals']}>
                     <li>
                         <a href="https://www.scc.kit.edu/en/legals.php" title="Documentation">
@@ -35,7 +35,7 @@ const Footer: FC = () => (
                     </li>
                 </ul>
             </div>
-            <div className="flex w-full items-center justify-center xl:w-[25%]">
+            <div className="flex w-full items-center justify-center md:w-1/3 xl:w-1/4">
                 <a href="https://ai4eosc.eu/" rel="noreferrer">
                     <img
                         className="logo"

frontend/components/OrderingSelector.tsx

 import { type ChangeEventHandler, type FC } from 'react';
 import Ordering from 'lib/Ordering';
+import clsx from 'clsx';
 
 type OrderingSelectorProps = {
     onChange: (ordering: Ordering | undefined) => void;
+    className?: string;
 };
-const OrderingSelector: FC<OrderingSelectorProps> = ({ onChange }) => {
+const OrderingSelector: FC<OrderingSelectorProps> = ({ onChange, className }) => {
     const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
         if (e.target.value.trim().length === 0) {
             onChange(undefined);
@@ -14,12 +16,12 @@ const OrderingSelector: FC<OrderingSelectorProps> = ({ onChange }) => {
     };
 
     return (
-        <div className="xs:w-full mb-2 flex flex-row items-center sm:w-auto">
-            <label htmlFor="ordering" className="mr-2 text-lg">
+        <div className={clsx('mb-2 flex w-full flex-row items-center sm:w-auto', className)}>
+            <label htmlFor="ordering" className="mr-2 min-w-[12ch] text-lg md:ms-auto md:min-w-fit">
                 Ordering:
             </label>
             <select
-                className="w-60 rounded-md disabled:opacity-50"
+                className="max-w-xs rounded-md disabled:opacity-50"
                 id="ordering"
                 onChange={_onChange}
             >

frontend/components/SelectedTags.tsx

@@ -8,7 +8,12 @@ type SelectedTagsProps = {
     onDelete: (tag: string) => void;
 };
 const SelectedTags: FC<SelectedTagsProps> = ({ className, tags, onDelete }) => (
-    <div className={clsx('xs:hidden mb-2 ml-2 flex flex-row flex-wrap gap-1 md:block', className)}>
+    <div
+        className={clsx(
+            'xs:hidden mb-2 ml-2 flex flex-row flex-wrap gap-1 empty:m-0 empty:gap-0 md:block',
+            className
+        )}
+    >
         {tags.map((tag) => (
             <SelectedTag key={tag} tag={tag} onDelete={(t) => onDelete(t)} />
         ))}

frontend/components/TagSelector.tsx

 import { difference } from 'lodash';
 import { type FC } from 'react';
+import clsx from 'clsx';
 
 type TagSelectorProps = {
     allTags: string[];
     selectedTags: string[];
     addTag: (tag: string) => void;
+    className?: string;
 };
 
-const TagSelector: FC<TagSelectorProps> = ({ allTags, selectedTags, addTag }) => (
-    <div className="xs:w-full mb-2 flex flex-row items-center sm:w-auto">
-        <label htmlFor="tag-select" className="mr-2 text-lg">
+const TagSelector: FC<TagSelectorProps> = ({ allTags, selectedTags, addTag, className }) => (
+    <div className={clsx('mb-2 flex w-full flex-row items-center sm:w-auto', className)}>
+        <label htmlFor="tag-select" className="mr-2 min-w-[12ch] text-lg md:min-w-fit">
             Filter by tags:
         </label>
         <select
             onChange={(e) => addTag(e.currentTarget.value)}
-            className="w-60 rounded-md disabled:opacity-50"
+            className="max-w-xs rounded-md disabled:opacity-50"
             id="tag-select"
             disabled={allTags.length === selectedTags.length}
             value=""

frontend/components/templates/Template.tsx

@@ -17,15 +17,15 @@ const Template: FC<TemplateProps> = ({ template }) => {
         <Link
             className={clsx(
                 styles['card'],
-                'text-black no-underline shadow transition-transform duration-75 hover:scale-105'
+                ' text-black no-underline shadow transition-transform duration-75 hover:scale-105'
             )}
             href={`/template/${template.id}`}
         >
-            <div className="flex flex-row">
+            <div className="flex flex-row flex-wrap">
                 <div className="grow">
-                    <div className="mb-2 flex items-center">
-                        <h2 className="mb-0">{template.title}</h2>{' '}
-                        {template.score && <Rating score={template.score} className="ml-2" />}
+                    <div className="mb-2 flex flex-wrap items-center justify-center">
+                        <h2 className="mb-0 mr-2">{template.title}</h2>{' '}
+                        {template.score && <Rating score={template.score} />}
                     </div>
                     <p className={styles['summary']}>{template.summary}</p>
                 </div>

frontend/pages/index.tsx

@@ -60,21 +60,26 @@ const Templates: NextPage = () => {
     return (
         <Layout>
             <h1 className="h5">Templates Hub</h1>
-            <p style={{ color: '#878787' }}>Create Software Projects easily from the templates below.{' '}
-            You are also welcome to <a href="https://github.com/m-team-kit/templates-hub">contribute</a> with more templates</p><br />
+            <p style={{ color: '#878787' }}>
+                Create Software Projects easily from the templates below. You are also welcome to{' '}
+                <a href="https://github.com/m-team-kit/templates-hub">contribute</a> with more
+                templates
+            </p>
+            <br />
 
             {templates.isLoading && <LoadingSpinner />}
 
             {templates.data && (
                 <>
-                    <div className="flex flex-row flex-wrap">
+                    <div className="justify-between md:flex md:flex-row md:flex-wrap">
                         <TagSelector
                             allTags={allTags}
                             selectedTags={selectedTags}
                             addTag={select}
+                            className="flex-1"
                         />
-                        <SelectedTags tags={selectedTags} onDelete={unselect} className="grow" />
-                        <OrderingSelector onChange={setOrdering} />
+                        <SelectedTags tags={selectedTags} onDelete={unselect} className="flex-1" />
+                        <OrderingSelector onChange={setOrdering} className="flex-1" />
                     </div>
                     <div className="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
                         {templates.data.data.map((template) => (