diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
index ff6a44b..39cc9a9 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@@ -18,6 +18,7 @@ import NoteIcon from '../../../Icons/NoteIcon'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder'
 import DocumentPrintButton from '../../common/DocumentPrintButton'
+import ScrollBox from '../../common/ScrollBox'
 
 const FilamentStockInfo = () => {
   const location = useLocation()
@@ -117,7 +118,7 @@ const FilamentStockInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -199,7 +200,7 @@ const FilamentStockInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
index 68672a3..e802967 100644
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('DocumentJobInfo')
 log.setLevel(config.logLevel)
@@ -120,7 +121,7 @@ const DocumentJobInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -186,7 +187,7 @@ const DocumentJobInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
index 1c92af7..57d6308 100644
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
@@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('DocumentPrinterInfo')
 log.setLevel(config.logLevel)
@@ -129,7 +130,7 @@ const DocumentPrinterInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -199,7 +200,7 @@ const DocumentPrinterInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
index 2ca40a4..62ba2c3 100644
--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
@@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('DocumentSizeInfo')
 log.setLevel(config.logLevel)
@@ -120,7 +121,7 @@ const DocumentSizeInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -186,7 +187,7 @@ const DocumentSizeInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
index 071a9d8..91e1f52 100644
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
@@ -13,6 +13,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import LockIndicator from '../../common/LockIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 import TemplateEditor from '../../common/TemplateEditor.jsx'
 
@@ -122,7 +123,7 @@ const DocumentTemplateDesign = () => {
         </Space>
       </Flex>
 
-      <div style={{ height: '100%', overflowY: 'scroll' }}>
+      <ScrollBox>
         <Flex vertical gap={'large'}>
           <ActionHandler
             actions={actions}
@@ -164,7 +165,7 @@ const DocumentTemplateDesign = () => {
             </Card>
           </InfoCollapse>
         </Flex>
-      </div>
+      </ScrollBox>
     </Flex>
   )
 }
diff --git a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
index c339114..06967a9 100644
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
@@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('DocumentTemplateInfo')
 log.setLevel(config.logLevel)
@@ -126,7 +127,7 @@ const DocumentTemplateInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -201,7 +202,7 @@ const DocumentTemplateInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
index e061ac3..d6dcfc5 100644
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@@ -21,6 +21,7 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import FilamentIcon from '../../../Icons/FilamentIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('FilamentInfo')
 log.setLevel(config.logLevel)
@@ -126,7 +127,7 @@ const FilamentInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -218,7 +219,7 @@ const FilamentInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Files/FileInfo.jsx b/src/components/Dashboard/Management/Files/FileInfo.jsx
index e45eebc..b5ad68b 100644
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@@ -23,6 +23,7 @@ import FileIcon from '../../../Icons/FileIcon.jsx'
 import FilePreview from '../../common/FilePreview.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('FileInfo')
 log.setLevel(config.logLevel)
@@ -130,7 +131,7 @@ const FileInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -214,7 +215,7 @@ const FileInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Hosts/HostInfo.jsx b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
index 8ee402a..95b2490 100644
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@@ -23,6 +23,7 @@ import HostOTP from './HostOtp.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
 import DocumentPrinterIcon from '../../../Icons/DocumentPrinterIcon.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('HostInfo')
 log.setLevel(config.logLevel)
@@ -132,7 +133,7 @@ const HostInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -245,7 +246,7 @@ const HostInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
 
       <Modal
diff --git a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
index eaad48b..1217ada 100644
--- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@@ -16,6 +16,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const NoteTypeInfo = () => {
   const location = useLocation()
@@ -109,7 +110,7 @@ const NoteTypeInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -164,7 +165,7 @@ const NoteTypeInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Notes/NoteInfo.jsx b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
index 95753df..c8206f7 100644
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('NoteInfo')
 log.setLevel(config.logLevel)
@@ -118,7 +119,7 @@ const NoteInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -183,7 +184,7 @@ const NoteInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Parts/PartInfo.jsx b/src/components/Dashboard/Management/Parts/PartInfo.jsx
index 4576449..99eceea 100644
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@@ -17,6 +17,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const PartInfo = () => {
   const location = useLocation()
@@ -109,7 +110,7 @@ const PartInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -174,7 +175,7 @@ const PartInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Products/ProductInfo.jsx b/src/components/Dashboard/Management/Products/ProductInfo.jsx
index d8c1380..86283c6 100644
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@@ -18,6 +18,7 @@ import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const ProductInfo = () => {
   const location = useLocation()
@@ -111,7 +112,7 @@ const ProductInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -192,7 +193,7 @@ const ProductInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Users/UserInfo.jsx b/src/components/Dashboard/Management/Users/UserInfo.jsx
index 87f79ce..c8595af 100644
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@@ -18,6 +18,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const UserInfo = () => {
   const location = useLocation()
@@ -110,7 +111,7 @@ const UserInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -176,7 +177,7 @@ const UserInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
index b525f82..b77721d 100644
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('VendorInfo')
 log.setLevel(config.logLevel)
@@ -118,7 +119,7 @@ const VendorInfo = () => {
             />
           </Space>
         </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -183,7 +184,7 @@ const VendorInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
index e4b9c7b..42daae2 100644
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@@ -23,6 +23,7 @@ import EyeIcon from '../../../Icons/EyeIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import FilePreview from '../../common/FilePreview.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('GCodeFileInfo')
 log.setLevel(config.logLevel)
@@ -128,7 +129,7 @@ const GCodeFileInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -224,7 +225,7 @@ const GCodeFileInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/Production/Jobs/JobInfo.jsx b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
index 1f20c7d..24799d1 100644
--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@@ -22,6 +22,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import JobIcon from '../../../Icons/JobIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import DeployJob from './DeployJob.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('JobInfo')
 log.setLevel(config.logLevel)
@@ -132,7 +133,7 @@ const JobInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -214,7 +215,7 @@ const JobInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
       <Modal
         destroyOnHidden
diff --git a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
index 7d2cef5..37bd726 100644
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@@ -30,6 +30,7 @@ import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 
 import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
 import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('ControlPrinter')
 log.setLevel(config.logLevel)
@@ -263,7 +264,7 @@ const ControlPrinter = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -486,7 +487,7 @@ const ControlPrinter = () => {
               </Card>
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
       <Modal
         open={loadFilamentStockOpen}
diff --git a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
index e5b5272..97c3bf6 100644
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
 
 const log = loglevel.getLogger('PrinterInfo')
 log.setLevel(config.logLevel)
@@ -122,7 +123,7 @@ const PrinterInfo = () => {
           </Space>
         </Flex>
 
-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
           <Flex vertical gap={'large'}>
             <ActionHandler
               actions={actions}
@@ -202,7 +203,7 @@ const PrinterInfo = () => {
               )}
             </InfoCollapse>
           </Flex>
-        </div>
+        </ScrollBox>
       </Flex>
     </>
   )
diff --git a/src/components/Dashboard/common/ScrollBox.jsx b/src/components/Dashboard/common/ScrollBox.jsx
new file mode 100644
index 0000000..b738f11
--- /dev/null
+++ b/src/components/Dashboard/common/ScrollBox.jsx
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+const ScrollBox = ({ children, style, ...rest }) => {
+  return (
+    <div style={{ height: '100%', minHeight: '0' }}>
+      <SimpleBar style={{ height: '100%', ...style }} {...rest}>
+        {children}
+      </SimpleBar>
+    </div>
+  )
+}
+
+ScrollBox.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.object
+}
+
+export default ScrollBox