diff --git a/.betterer.results b/.betterer.results
index 7b27f0a5d64..f3d5cf6ecf5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1395,9 +1395,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-ui/src/components/Drawer/Drawer.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
index babb7940c84..9ffec537740 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 
 import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Drawer.mdx';
@@ -16,11 +15,8 @@ const meta: ComponentMeta<typeof Drawer> = {
     docs: {
       page: mdx,
     },
-    knobs: {
-      disable: true,
-    },
     controls: {
-      exclude: ['onClose'],
+      exclude: ['onClose', 'tabs'],
     },
   },
   args: {
@@ -38,40 +34,26 @@ const meta: ComponentMeta<typeof Drawer> = {
 };
 
 export const Global: ComponentStory<typeof Drawer> = (args) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <UseState initialState={{ isOpen: false }}>
-      {(state, updateValue) => {
-        return (
-          <>
-            <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
-            {state.isOpen && (
-              <Drawer
-                title={args.title}
-                subtitle={args.subtitle}
-                closeOnMaskClick={args.closeOnMaskClick}
-                scrollableContent={args.scrollableContent}
-                width={args.width}
-                onClose={() => {
-                  updateValue({ isOpen: !state.isOpen });
-                }}
-              >
-                <div style={{ padding: '10px' }}>
-                  <ul>
-                    <li>this</li>
-                    <li>is</li>
-                    <li>a</li>
-                    <li>list</li>
-                    <li>of</li>
-                    <li>menu</li>
-                    <li>items</li>
-                  </ul>
-                </div>
-              </Drawer>
-            )}
-          </>
-        );
-      }}
-    </UseState>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+      {isOpen && (
+        <Drawer {...args} onClose={() => setIsOpen(false)}>
+          <div style={{ padding: '10px' }}>
+            <ul>
+              <li>this</li>
+              <li>is</li>
+              <li>a</li>
+              <li>list</li>
+              <li>of</li>
+              <li>menu</li>
+              <li>items</li>
+            </ul>
+          </div>
+        </Drawer>
+      )}
+    </>
   );
 };
 
@@ -80,100 +62,80 @@ Global.args = {
 };
 
 export const LongContent: ComponentStory<typeof Drawer> = (args) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <UseState initialState={{ isOpen: true }}>
-      {(state, updateValue) => {
-        return (
-          <>
-            <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
-            {state.isOpen && (
-              <Drawer
-                title={args.title}
-                subtitle={args.subtitle}
-                closeOnMaskClick={args.closeOnMaskClick}
-                scrollableContent={args.scrollableContent}
-                width={args.width}
-                onClose={() => {
-                  updateValue({ isOpen: !state.isOpen });
-                }}
-              >
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                  dolore magna aliqua. Iaculis nunc sed augue lacus viverra vitae. Malesuada pellentesque elit eget
-                  gravida cum sociis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Cras
-                  adipiscing enim eu turpis egestas. Ut lectus arcu bibendum at varius. Nulla pellentesque dignissim
-                  enim sit amet venenatis urna. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Vitae
-                  congue mauris rhoncus aenean. Enim ut tellus elementum sagittis vitae et.
-                </p>
-                <p>
-                  Arcu non odio euismod lacinia at quis risus sed vulputate. Sit amet consectetur adipiscing elit ut.
-                  Dictum fusce ut placerat orci nulla pellentesque dignissim. Lectus nulla at volutpat diam ut venenatis
-                  tellus. Sed cras ornare arcu dui. Eget mauris pharetra et ultrices neque ornare aenean euismod. Mi
-                  quis hendrerit dolor magna. Commodo viverra maecenas accumsan lacus vel facilisis. Eget mi proin sed
-                  libero enim sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Mattis nunc sed blandit
-                  libero volutpat.
-                </p>
-                <p>
-                  Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
-                  Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
-                  eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
-                  erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
-                  odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
-                  odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
-                  adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
-                  ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
-                  ridiculus mus mauris vitae ultricies leo.
-                </p>
-                <p>
-                  Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
-                  Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
-                  eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
-                  erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
-                  odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
-                  odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
-                  adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
-                  ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
-                  ridiculus mus mauris vitae ultricies leo.
-                </p>
-                <p>
-                  Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
-                  Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
-                  eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
-                  erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
-                  odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
-                  odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
-                  adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
-                  ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
-                  ridiculus mus mauris vitae ultricies leo.
-                </p>
-                <p>
-                  Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
-                  Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
-                  eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
-                  erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
-                  odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
-                  odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
-                  adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
-                  ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
-                  ridiculus mus mauris vitae ultricies leo.
-                </p>
-                <p>
-                  Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
-                  Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
-                  eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
-                  erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
-                  odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
-                  odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
-                  adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
-                  ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
-                  ridiculus mus mauris vitae ultricies leo.
-                </p>
-              </Drawer>
-            )}
-          </>
-        );
-      }}
-    </UseState>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+      {isOpen && (
+        <Drawer {...args} onClose={() => setIsOpen(false)}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Iaculis nunc sed augue lacus viverra vitae. Malesuada pellentesque elit eget gravida
+            cum sociis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Cras adipiscing enim eu
+            turpis egestas. Ut lectus arcu bibendum at varius. Nulla pellentesque dignissim enim sit amet venenatis
+            urna. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Vitae congue mauris rhoncus aenean.
+            Enim ut tellus elementum sagittis vitae et.
+          </p>
+          <p>
+            Arcu non odio euismod lacinia at quis risus sed vulputate. Sit amet consectetur adipiscing elit ut. Dictum
+            fusce ut placerat orci nulla pellentesque dignissim. Lectus nulla at volutpat diam ut venenatis tellus. Sed
+            cras ornare arcu dui. Eget mauris pharetra et ultrices neque ornare aenean euismod. Mi quis hendrerit dolor
+            magna. Commodo viverra maecenas accumsan lacus vel facilisis. Eget mi proin sed libero enim sed. Magna ac
+            placerat vestibulum lectus mauris ultrices eros in. Mattis nunc sed blandit libero volutpat.
+          </p>
+          <p>
+            Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
+            duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
+            pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
+            vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
+            Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
+            Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
+            risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
+            Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
+          </p>
+          <p>
+            Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
+            duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
+            pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
+            vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
+            Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
+            Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
+            risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
+            Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
+          </p>
+          <p>
+            Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
+            duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
+            pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
+            vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
+            Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
+            Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
+            risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
+            Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
+          </p>
+          <p>
+            Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
+            duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
+            pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
+            vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
+            Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
+            Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
+            risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
+            Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
+          </p>
+          <p>
+            Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
+            duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
+            pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
+            vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
+            Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
+            Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
+            risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
+            Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
+          </p>
+        </Drawer>
+      )}
+    </>
   );
 };
 LongContent.args = {
@@ -181,58 +143,43 @@ LongContent.args = {
 };
 
 export const InLine: ComponentStory<typeof Drawer> = (args) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <UseState initialState={{ isOpen: false }}>
-      {(state, updateValue) => {
-        return (
-          <>
-            <div
-              style={{
-                height: '300px',
-                width: '500px',
-                border: '1px solid white',
-                position: 'relative',
-                overflow: 'hidden',
-              }}
-            >
-              <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
-              {state.isOpen && (
-                <Drawer
-                  inline={args.inline}
-                  title={args.title}
-                  subtitle={args.subtitle}
-                  closeOnMaskClick={args.closeOnMaskClick}
-                  scrollableContent={args.scrollableContent}
-                  width={args.width}
-                  onClose={() => {
-                    updateValue({ isOpen: !state.isOpen });
-                  }}
-                >
-                  <ul>
-                    <li>this</li>
-                    <li>is</li>
-                    <li>a</li>
-                    <li>list</li>
-                    <li>of</li>
-                    <li>menu</li>
-                    <li>items</li>
-                  </ul>
-                </Drawer>
-              )}
-            </div>
-          </>
-        );
-      }}
-    </UseState>
+    <>
+      <div
+        style={{
+          height: '300px',
+          width: '500px',
+          border: '1px solid white',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+        {isOpen && (
+          <Drawer {...args} onClose={() => setIsOpen(false)}>
+            <ul>
+              <li>this</li>
+              <li>is</li>
+              <li>a</li>
+              <li>list</li>
+              <li>of</li>
+              <li>menu</li>
+              <li>items</li>
+            </ul>
+          </Drawer>
+        )}
+      </div>
+    </>
   );
 };
-
 InLine.args = {
-  title: 'Storybook',
+  title: 'Drawer title inline',
   inline: true,
 };
 
-export function WithTabs() {
+export const WithTabs: ComponentStory<typeof Drawer> = (args) => {
+  const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('options');
 
   const tabs = (
@@ -248,11 +195,19 @@ export function WithTabs() {
   );
 
   return (
-    <Drawer title={'Main title'} subtitle={'Sub title'} width={700} onClose={() => {}} tabs={tabs}>
-      {activeTab === 'options' && <div>Here are some options</div>}
-      {activeTab === 'changes' && <div>Here are some changes</div>}
-    </Drawer>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+      {isOpen && (
+        <Drawer {...args} tabs={tabs} onClose={() => setIsOpen(false)}>
+          {activeTab === 'options' && <div>Here are some options</div>}
+          {activeTab === 'changes' && <div>Here are some changes</div>}
+        </Drawer>
+      )}
+    </>
   );
-}
+};
+WithTabs.args = {
+  title: 'Drawer title with tabs',
+};
 
 export default meta;
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 275ba48579a..3bc672f544a 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -67,6 +67,10 @@ export function Drawer({
   }, []);
 
   const content = <div className={drawerStyles.content}>{children}</div>;
+  const style: CSSProperties = {};
+  if (inline) {
+    style.position = 'absolute';
+  }
 
   return (
     <RcDrawer
@@ -78,7 +82,7 @@ export function Drawer({
       placement="right"
       width={currentWidth}
       getContainer={inline ? undefined : 'body'}
-      style={{ position: `${inline && 'absolute'}` } as CSSProperties}
+      style={style}
       className={drawerStyles.drawer}
       aria-label={
         typeof title === 'string'