scrollbar fixes (#5529)

# Description of Changes

- Add scrolling bar to settings menus
- Fix scrolling bar in My files

-fix depreciated pdf editor code


## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/core/components/fileManager/DesktopLayout.tsx

@@ -62,11 +62,15 @@ const DesktopLayout: React.FC = () => {
             </>
           )}
 
-          <div style={{ flex: 1, minHeight: 0 }}>
+          <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
             <FileListArea
-              scrollAreaHeight={`calc(${modalHeight} )`}
+              scrollAreaHeight={activeSource === 'recent' && recentFiles.length > 0
+                ? `calc(${modalHeight} - 7rem)`
+                : '100%'}
               scrollAreaStyle={{
-                height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
+                height: activeSource === 'recent' && recentFiles.length > 0
+                  ? `calc(${modalHeight} - 7rem)`
+                  : '100%',
                 backgroundColor: 'transparent',
                 border: 'none',
                 borderRadius: 0

frontend/src/core/components/shared/AppConfigModal.css

@@ -57,12 +57,35 @@
   overflow-y: auto;
   padding: 1rem;
   padding-bottom: 2rem;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.2s ease;
+}
+
+.modal-nav-scroll:hover {
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
 }
 
 .modal-nav-scroll::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+}
+
+.modal-nav-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal-nav-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.modal-nav-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(128, 128, 128, 0.5);
+}
+
+.modal-nav-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(128, 128, 128, 0.7);
 }
 
 .modal-nav-section {
@@ -94,12 +117,35 @@
 .modal-content-scroll {
   flex: 1;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.2s ease;
+}
+
+.modal-content-scroll:hover {
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
 }
 
 .modal-content-scroll::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+}
+
+.modal-content-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal-content-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.modal-content-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(128, 128, 128, 0.5);
+}
+
+.modal-content-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(128, 128, 128, 0.7);
 }
 
 .modal-header {