added padding around elements individually to avoid scrolling issues for extrinsic

src/App.tsx

@@ -12,7 +12,6 @@ export default function App() {
   return (
     <div className="w-full max-w-screen-lg h-screen bg-polkadot-950 flex flex-col">
       <Header />
-      <div className="p-4">
         <Routes>
           <Route path="explorer/*" element={<Explorer />} />
           <Route path="extrinsics/*" element={<Extrinsics />} />
@@ -22,7 +21,6 @@ export default function App() {
           <Route path="metadata/*" element={<Metadata />} />
           <Route path="*" element={<Navigate to="/extrinsics" replace />} />
         </Routes>
-      </div>
       <Transactions />
     </div>
   )

src/pages/Constants.tsx

@@ -35,7 +35,7 @@ export const Constants = withSubscribe(
     const entries = useStateObservable(metadataConstants$)
 
     return (
-      <div className="p-2 flex flex-col gap-2 items-start overflow-auto leading-relaxed">
+      <div className="p-4 pb-0 flex flex-col gap-2 items-start overflow-auto leading-relaxed">
         <ul>
           {entries.map(({ name, constants }) => (
             <PalletConstants key={name} name={name} entries={constants} />

src/pages/Explorer/Explorer.tsx

@@ -13,7 +13,7 @@ export const Explorer = withSubscribe(
       <Route
         path="*"
         element={
-          <div className="overflow-auto">
+          <div className="overflow-auto p-4 pb-0">
             <Summary />
             <div className="flex gap-2 items-start flex-wrap lg:flex-nowrap">
               <BlockTable />

src/pages/Extrinsics/Extrinsics.tsx

@@ -54,7 +54,7 @@ export const Extrinsics = withSubscribe(
           : undefined
 
     return (
-      <div className="flex flex-col overflow-hidden gap-2">
+      <div className="flex flex-col overflow-hidden gap-2 p-4 pb-0">
         {/* <div>Extrinsics</div> */}
         <BinaryDisplay
           {...extrinsicProps}

src/pages/Header.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom"
 
 export const Header = () => (
-  <div className="flex p-4 pb-0 items-center flex-shrink-0">
+  <div className="flex p-4 pb-2 items-center flex-shrink-0">
     <div className="flex flex-1 items-center flex-row gap-2">
       <img className="w-14 min-w-14" src="/papi_logo-dark.svg" alt="papi-logo" />
       <h1 className="hidden lg:block poppins-regular text-xl">papi <span className="poppins-extralight">console</span></h1>

src/pages/Metadata/Metadata.tsx

@@ -32,7 +32,7 @@ const MetadataExplorer = () => {
   const metadata = useStateObservable(metadata$)
 
   return (
-    <div className="flex flex-col overflow-auto items-start gap-2 p-2">
+    <div className="p-4 pb-0 flex flex-col overflow-auto items-start gap-2">
       <ButtonGroup
         value={mode}
         onValueChange={setMode as any}

src/pages/RuntimeCalls/RuntimeCalls.tsx

@@ -56,7 +56,7 @@ export const RuntimeCalls = withSubscribe(
     }, [selectedApi, method])
 
     return (
-      <div className="p-2 flex flex-col gap-2 items-start">
+      <div className="p-4 pb-0 flex flex-col gap-2 items-start">
         <div className="flex items-center gap-2">
           <label>
             API

src/pages/Storage/Storage.tsx

@@ -102,7 +102,7 @@ export const Storage = withSubscribe(
     }, [selectedPallet, entry])
 
     return (
-      <div className="p-2 flex flex-col gap-2 items-start">
+      <div className="p-4 pb-0 flex flex-col gap-2 items-start">
         <div className="flex items-center gap-2">
           <label>
             Pallet