style: Update StopSheet styles and fix layout issues in footer

2 files changed, 8 insertions, 6 deletions

diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index a34d730..5869d41 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -17,7 +17,7 @@
   padding: 16px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  /* overflow: hidden; */
   touch-action: pan-y;
 }
 
@@ -175,9 +175,11 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 0.75rem 0 1rem 0;
-  padding-top: 0.75rem;
-  padding-inline: 16px;
+  margin: 0;
+  padding: 0.75rem 16px 1rem 16px;
+  border-top: 1px solid var(--border-color);
+  background-color: var(--background-color);
+  z-index: 10;
 }
 
 .stop-sheet-timestamp {
diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx
index f32c435..cf070e2 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -176,8 +176,9 @@ export const StopSheet: React.FC<StopSheetProps> = ({
               </>
             ) : null}
           </div>
+        </Sheet.Content>
 
-          <div className="stop-sheet-footer">
+        <div className="stop-sheet-footer">
             {lastUpdated && (
               <div className="stop-sheet-timestamp">
                 {t("estimates.last_updated", "Actualizado a las")}{" "}
@@ -211,7 +212,6 @@ export const StopSheet: React.FC<StopSheetProps> = ({
               </Link>
             </div>
           </div>
-        </Sheet.Content>
       </Sheet.Container>
       <Sheet.Backdrop onTap={onClose} />
     </Sheet>