hosting page image size ui fix

app/static/styles.css

@@ -141,19 +141,47 @@ pre {
 
 .nav-actions {
   justify-content: flex-end;
-  flex: 1 1 280px;
-  flex-wrap: wrap;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  gap: 10px;
   min-width: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .nav-actions form {
   display: flex;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.nav-actions::-webkit-scrollbar {
+  display: none;
 }
 
 .persona-pill {
   flex-wrap: wrap;
 }
 
+.nav-actions > * {
+  flex: 0 0 auto;
+}
+
+.nav-persona,
+.nav-button {
+  white-space: nowrap;
+}
+
+.nav-persona {
+  gap: 6px;
+  padding: 10px 14px;
+}
+
+.nav-button {
+  padding: 10px 16px;
+}
+
 .primary-button,
 .secondary-button,
 .ghost-button,
@@ -821,20 +849,24 @@ textarea {
 }
 
 .host-listings-grid {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
 }
 
 .host-card {
   display: grid;
-  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
-  gap: 20px;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 18px;
   align-items: start;
   min-width: 0;
 }
 
 .host-card-media {
   display: block;
+  width: 100%;
+  max-width: 140px;
   min-width: 0;
+  align-self: start;
+  justify-self: start;
 }
 
 .host-card-heading {
@@ -1100,10 +1132,6 @@ td {
     flex-direction: row;
     justify-content: flex-start;
   }
-
-  .host-card {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 720px) {
@@ -1139,3 +1167,23 @@ td {
     align-items: flex-start;
   }
 }
+
+@media (max-width: 1200px) {
+  .persona-home {
+    display: none;
+  }
+
+  .nav-persona {
+    padding: 9px 12px;
+  }
+
+  .nav-button {
+    padding: 9px 14px;
+  }
+}
+
+@media (max-width: 640px) {
+  .host-card {
+    grid-template-columns: 1fr;
+  }
+}

app/templates/base.html

@@ -25,13 +25,13 @@
         </nav>
         <div class="nav-actions">
           {% if current_user %}
-            <span class="persona-pill">
+            <span class="persona-pill nav-persona">
               <span>{{ current_user.name }}</span>
-              <small>{{ current_user.hometown }}</small>
+              <small class="persona-home">{{ current_user.hometown }}</small>
             </span>
-            <a class="secondary-button" href="/login?next={{ request.url.path }}">Switch Account</a>
-            <form method="post" action="/logout">
-              <button class="ghost-button" type="submit">Log Out</button>
+            <a class="secondary-button nav-button" href="/login?next={{ request.url.path }}">Switch</a>
+            <form class="nav-logout-form" method="post" action="/logout">
+              <button class="ghost-button nav-button" type="submit">Log Out</button>
             </form>
           {% else %}
             <a class="primary-button" href="/login?next={{ request.url.path }}">Sign In</a>

app/templates/host_dashboard.html

@@ -31,8 +31,8 @@
   <section class="host-listings-grid">
     {% for card in host_cards %}
       <article class="panel host-card">
-        <a class="host-card-media" href="{{ request.app.url_path_for('listing_detail', slug=card.listing.slug) }}">
-          <img class="panel-image" src="{{ card.listing.primary_image }}" alt="{{ card.listing.title }}" />
+        <a class="trip-thumb host-card-media" href="{{ request.app.url_path_for('listing_detail', slug=card.listing.slug) }}">
+          <img src="{{ card.listing.primary_image }}" alt="{{ card.listing.title }}" />
         </a>
         <div class="host-card-body">
           <div class="panel-heading host-card-heading">