From 23c4884845cdda142c6666d2bf7fd531ddfeffc2 Mon Sep 17 00:00:00 2001
From: sunnyajit <sunnykumar98012085@gmail.com>
Date: Wed, 17 Jun 2026 12:39:56 +0530
Subject: [PATCH] fix: keep download button alignment stable across zoom levels

---
 src/app/components/Resume/ResumeControlBar.tsx | 10 +++++++---
 src/app/components/Resume/index.tsx            |  9 ++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Resume/ResumeControlBar.tsx b/src/app/components/Resume/ResumeControlBar.tsx
index ec81200..a418675 100644
--- a/src/app/components/Resume/ResumeControlBar.tsx
+++ b/src/app/components/Resume/ResumeControlBar.tsx
@@ -34,8 +34,8 @@ const ResumeControlBar = ({
   }, [update, document]);
 
   return (
-    <div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center justify-center px-[var(--resume-padding)] text-gray-600 lg:justify-between">
-      <div className="flex items-center gap-2">
+    <div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center px-[var(--resume-padding)] text-gray-600">
+      <div className="flex flex-1 items-center gap-2">
         <MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
         <input
           type="range"
@@ -60,7 +60,7 @@ const ResumeControlBar = ({
         </label>
       </div>
       <a
-        className="ml-1 flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100 lg:ml-8"
+        className="ml-auto flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100"
         href={instance.url!}
         download={fileName}
       >
@@ -84,3 +84,7 @@ export const ResumeControlBarCSR = dynamic(
 export const ResumeControlBarBorder = () => (
   <div className="absolute bottom-[var(--resume-control-bar-height)] w-full border-t-2 bg-gray-50" />
 );
+
+
+
+
diff --git a/src/app/components/Resume/index.tsx b/src/app/components/Resume/index.tsx
index 7a0b8da..28adc6e 100644
--- a/src/app/components/Resume/index.tsx
+++ b/src/app/components/Resume/index.tsx
@@ -34,7 +34,7 @@ export const Resume = () => {
       <NonEnglishFontsCSSLazyLoader />
       <div className="relative flex justify-center md:justify-start">
         <FlexboxSpacer maxWidth={50} className="hidden md:block" />
-        <div className="relative">
+        <div className="relative w-full">
           <section className="h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden md:p-[var(--resume-padding)]">
             <ResumeIframeCSR
               documentSize={settings.documentSize}
@@ -61,3 +61,10 @@ export const Resume = () => {
     </>
   );
 };
+
+
+
+
+
+
+