Fix layout issues in side panel

pages/side-panel/src/SidePanel.tsx

@@ -485,7 +485,7 @@ const SidePanel = () => {
   return (
     <div>
       <div
-        className={`flex flex-col h-[100vh] ${isDarkMode ? 'bg-slate-900' : "bg-[url('/bg.jpg')] bg-cover bg-no-repeat"} overflow-hidden border ${isDarkMode ? 'border-sky-800' : 'border-[rgb(186,230,253)]'} rounded-2xl`}>
+        className={`flex h-screen flex-col ${isDarkMode ? 'bg-slate-900' : "bg-[url('/bg.jpg')] bg-cover bg-no-repeat"} overflow-hidden border ${isDarkMode ? 'border-sky-800' : 'border-[rgb(186,230,253)]'} rounded-2xl`}>
         <header className="header relative">
           <div className="header-logo">
             {showHistory ? (
@@ -497,7 +497,7 @@ const SidePanel = () => {
                 ← Back
               </button>
             ) : (
-              <img src="/icon-128.png" alt="Extension Logo" className="h-6 w-6" />
+              <img src="/icon-128.png" alt="Extension Logo" className="size-6" />
             )}
           </div>
           <div className="header-icons">
@@ -556,7 +556,7 @@ const SidePanel = () => {
             {messages.length === 0 && (
               <>
                 <div
-                  className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} backdrop-blur-sm p-2 shadow-sm mb-2`}>
+                  className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} mb-2 p-2 shadow-sm backdrop-blur-sm`}>
                   <ChatInput
                     onSendMessage={handleSendMessage}
                     onStopTask={handleStopTask}
@@ -578,13 +578,13 @@ const SidePanel = () => {
               </>
             )}
             <div
-              className={`flex-1 overflow-y-scroll overflow-x-hidden scrollbar-gutter-stable p-4 scroll-smooth ${isDarkMode ? 'bg-slate-900 bg-opacity-80' : ''}`}>
+              className={`scrollbar-gutter-stable flex-1 overflow-x-hidden overflow-y-scroll scroll-smooth p-2 ${isDarkMode ? 'bg-slate-900/80' : ''}`}>
               <MessageList messages={messages} isDarkMode={isDarkMode} />
               <div ref={messagesEndRef} />
             </div>
             {messages.length > 0 && (
               <div
-                className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} backdrop-blur-sm p-2 shadow-sm`}>
+                className={`border-t ${isDarkMode ? 'border-sky-900' : 'border-sky-100'} p-2 shadow-sm backdrop-blur-sm`}>
                 <ChatInput
                   onSendMessage={handleSendMessage}
                   onStopTask={handleStopTask}

pages/side-panel/src/components/ChatInput.tsx

@@ -83,7 +83,7 @@ export default function ChatInput({
           onKeyDown={handleKeyDown}
           disabled={disabled}
           rows={4}
-          className={`w-full resize-none border-none p-3 focus:outline-none ${
+          className={`w-full resize-none border-none p-2 focus:outline-none ${
             disabled
               ? isDarkMode
                 ? 'bg-slate-800 text-gray-400'
@@ -97,7 +97,7 @@ export default function ChatInput({
         />
 
         <div
-          className={`flex items-center justify-between px-3 py-1.5 ${
+          className={`flex items-center justify-between px-2 py-1.5 ${
             disabled ? (isDarkMode ? 'bg-slate-800' : 'bg-gray-100') : isDarkMode ? 'bg-slate-800' : 'bg-white'
           }`}>
           <div className="flex gap-2 text-gray-500">{/* Icons can go here */}</div>

pages/side-panel/src/components/MessageList.tsx

@@ -38,7 +38,7 @@ function MessageBlock({ message, isSameActor, isDarkMode = false }: MessageBlock
 
   return (
     <div
-      className={`flex max-w-full gap-3 px-4 ${
+      className={`flex max-w-full gap-3 ${
         !isSameActor
           ? `mt-4 border-t ${isDarkMode ? 'border-sky-800/50' : 'border-sky-200/50'} pt-4 first:mt-0 first:border-t-0 first:pt-0`
           : ''

pages/side-panel/src/components/TemplateList.tsx

@@ -13,11 +13,12 @@ interface TemplateListProps {
 
 const TemplateList: React.FC<TemplateListProps> = ({ templates, onTemplateSelect, isDarkMode = false }) => {
   return (
-    <div className="p-4">
+    <div className="p-2">
       <h3 className={`mb-3 text-sm font-medium ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}>Templates</h3>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
         {templates.map(template => (
           <button
+            type="button"
             key={template.id}
             onClick={() => onTemplateSelect(template.content)}
             className={`rounded-lg p-3 text-left transition-colors ${

pages/side-panel/src/templates.tsx

@@ -8,13 +8,13 @@ export const defaultTemplates = [
   },
   {
     id: '2',
-    title: 'Follow us on X!',
+    title: '🐦 Follow us on X/Twitter!',
     content: 'Follow us at https://x.com/nanobrowser_ai to stay updated on the latest news and features!',
   },
   {
     id: '3',
-    title: 'Explore AI Papers',
+    title: '📚 Explore AI Papers',
     content:
-      '- Go to https://huggingface.co/papers and click through each of the top 3 upvoted papers.\n- For each paper:\n  - Record the title, URL\n  - Summarise the abstract\n  - Finally, compile together a summary of all 3 papers, ranked by upvotes',
+      '- Go to https://huggingface.co/papers and click through each of the top 3 upvoted papers.\n- For each paper:\n  - Record the title, URL and upvotes\n  - Summarise the abstract section\n  - Finally, compile together a summary of all 3 papers, ranked by upvotes',
   },
 ];