Improve mobile layout

Author: hasparus

src/app/(main)/community/events/events-list.tsx

@@ -106,7 +106,7 @@ export function EventsList({
 
   return (
     <div className={className}>
-      <div className="mb-8 flex items-end justify-between">
+      <div className="flex justify-between gap-2 max-lg:flex-col-reverse lg:mb-8 lg:items-end">
         <fieldset>
           <legend className="typography-menu mt-2">Event type</legend>
           <div className="mt-4 flex gap-3">

src/app/(main)/community/events/page.tsx

@@ -62,7 +62,7 @@ export default async function EventsPage() {
               </p>
             </div>
             <Button
-              className="w-fit self-end lg:row-span-2"
+              className="w-fit self-end max-md:hidden lg:row-span-2"
               href={ISSUE_TEMPLATE_LINK}
             >
               Add a new event
@@ -71,6 +71,9 @@ export default async function EventsPage() {
           <EventsList events={upcomingEvents}>
             <SubscribeToRssLink />
           </EventsList>
+          <Button className="md:hidden" href={ISSUE_TEMPLATE_LINK}>
+            Add a new event
+          </Button>
         </section>
       )}
 

src/app/(main)/community/events/subscribe-to-rss-link.tsx

@@ -2,7 +2,10 @@ import rssImage from "./rss.png"
 
 export function SubscribeToRssLink() {
   return (
-    <a href="/community/events/feed.xml" className="flex items-center">
+    <a
+      href="/community/events/feed.xml"
+      className="-mx-4 -my-2 flex items-center px-4 py-2 transition-colors hover:bg-neu-100 hover:duration-0 max-md:mb-6"
+    >
       <span>Subscribe to Events RSS</span>
       <img
         src={rssImage.src}