bug: #313 responsive width wrt size (#302)

* #294 refactor Browser.tsx and Browser.css

* #313 UI responsive

* husky issue resolved

* #313 UI responsive

frontend/.husky/pre-commit

@@ -1,2 +1,2 @@
 cd frontend
-npx lint-staged
+npx lint-staged

frontend/src/App.tsx

@@ -58,9 +58,9 @@ function App(): JSX.Element {
       <div className="right-pane">
         <div className="navbar bg-base-100">
           <div className="flex-1">
-            <div className="btn btn-ghost text-xl">OpenDevin Workspace</div>
+            <div className="btn btn-ghost text-xl xl:w-full xl:h-full h-1/2 w-1/2 ml-4">OpenDevin Workspace</div>
           </div>
-          <div className="flex-none">
+          <div className="flex">
             <BannerSettings />
           </div>
         </div>

frontend/src/components/BannerSettings.tsx

@@ -13,7 +13,7 @@ function ModelSelect(): JSX.Element {
       onChange={(e: ChangeEvent<HTMLSelectElement>) =>
         changeModel(e.target.value)
       }
-      className="select w-full max-w-xs bg-base-300"
+      className="select max-w-xs bg-base-300 xl:w-full w-1/3"
     >
       {MODELS.map((model) => (
         <option>{model}</option>
@@ -28,7 +28,7 @@ function AgentSelect(): JSX.Element {
       onChange={(e: ChangeEvent<HTMLSelectElement>) =>
         changeAgent(e.target.value)
       }
-      className="select w-full max-w-xs bg-base-300"
+      className="select max-w-xs bg-base-300 xl:w-full w-1/3"
     >
       {AGENTS.map((agent) => (
         <option>{agent}</option>

frontend/src/components/Browser.css

@@ -3,5 +3,5 @@
   padding: 1rem;
   height: 90%;
   margin: 1rem;
-  borderRadius: 1rem;
+  border-radius: 1rem;
 }