Improve mobile UI

Dockerfile

@@ -19,8 +19,8 @@ RUN npm run build
 # Install serve
 RUN npm install -g serve
 
-# Expose port 7860 (default for Hugging Face Spaces)
-EXPOSE 7860
+# Expose port 8080
+EXPOSE 8080
 
 # Start server
-CMD ["serve", "-s", "dist", "-l", "7860"] 
+CMD ["serve", "-s", "dist", "-l", "8080"] 

README.md

@@ -5,6 +5,7 @@ colorFrom: gray
 colorTo: blue
 sdk: docker
 pinned: false
+app_port: 8080
 ---
 
 # AI Conference Deadlines
@@ -100,10 +101,10 @@ docker build -t ai-deadlines .
 Next it can be run as follows:
 
 ```bash
-docker run -it -p 7860:7860 ai-deadlines
+docker run -it -p 8080:8080 ai-deadlines
 ```
 
-You can see it in your web browser at http://localhost:7860/.
+You can see it in your web browser at http://localhost:8080/.
 
 ## Technologies used
 
@@ -115,6 +116,16 @@ This project is built with:
 - shadcn-ui
 - Tailwind CSS
 
+## Deploy on the cloud
+
+One way to deploy this on a cloud is by using [Artifact Registry](https://cloud.google.com/artifact-registry/docs) (for hosting the Docker image) and [Cloud Run](https://cloud.google.com/run?hl=en) (a serverless service by Google to run Docker containers). Make sure to have the [gcloud SDK installed](https://cloud.google.com/sdk/docs/install). To deploy, simply run:
+
+```bash
+gcloud auth login
+gcloud auth application-default login
+gcloud run deploy --source .
+```
+
 ## License
 
 This project is licensed under [MIT](LICENSE).

src/components/Header.tsx

@@ -12,8 +12,8 @@ const Header = ({ onSearch, showEmptyMessage = false }: HeaderProps) => {
   return (
     <header className="bg-white border-b border-neutral-200">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center gap-8">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between md:h-16 py-4 md:py-0 gap-4 md:gap-0">
+          <div className="flex items-center justify-center md:justify-start w-full md:w-auto gap-8">
             <Link to="/" className="flex items-center gap-2">
               <img 
                 src="https://huggingface.co/front/assets/huggingface_logo.svg" 
@@ -21,7 +21,8 @@ const Header = ({ onSearch, showEmptyMessage = false }: HeaderProps) => {
                 className="h-8 w-8"
               />
               <span className="text-2xl font-bold text-primary">
-                AI Conference Deadlines
+                <span className="hidden md:inline">AI Conference Deadlines</span>
+                <span className="md:hidden">AI Deadlines</span>
               </span>
             </Link>
             <nav className="hidden md:flex space-x-4">
@@ -34,7 +35,7 @@ const Header = ({ onSearch, showEmptyMessage = false }: HeaderProps) => {
               </Link>
             </nav>
           </div>
-          <div className="max-w-lg w-full lg:max-w-xs">
+          <div className="w-full md:max-w-lg lg:max-w-xs">
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <Search className="h-5 w-5 text-neutral-400" />
@@ -42,7 +43,7 @@ const Header = ({ onSearch, showEmptyMessage = false }: HeaderProps) => {
               <Input
                 type="search"
                 placeholder="Search conferences..."
-                className="pl-10"
+                className="pl-10 w-full"
                 onChange={(e) => onSearch(e.target.value)}
               />
             </div>