diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 88017d215..b8c949484 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -105,7 +105,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="27">
+          <list size="28">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -133,6 +133,7 @@
             <item index="24" class="java.lang.String" itemvalue="slot" />
             <item index="25" class="java.lang.String" itemvalue="mwc-circular-progress" />
             <item index="26" class="java.lang.String" itemvalue="mwc-snackbar" />
+            <item index="27" class="java.lang.String" itemvalue="material-select" />
           </list>
         </value>
       </option>
diff --git a/resources/js/Components/Pages/RecordsPage.tsx b/resources/js/Components/Pages/RecordsPage.tsx
index 08ddd1960..4b51ec403 100644
--- a/resources/js/Components/Pages/RecordsPage.tsx
+++ b/resources/js/Components/Pages/RecordsPage.tsx
@@ -43,6 +43,7 @@ import TableRow from '../DataTable/TableRow';
 import LoadingButton from '../LoadingButton';
 import Mdi from '../Mdi';
 import Page from '../Page';
+import {Select} from '../../WebComponents';
 
 export type ColumnT = {
   id?: string
@@ -102,9 +103,27 @@ export class RecordsPage extends Page {
           return;
         }
 
-        await this.updateRecord($(cell).parent('tr').data('model-id') as number);
+        await this.updateRecord($(cell)
+          .parent('tr')
+          .data('model-id') as number);
       });
     }
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const select = entry.target as Select;
+          if (select.fixedMenuPosition) {
+            select.addEventListener('opened', () => select.style.setProperty('--mdc-menu-min-width', `${select.offsetWidth}px`));
+          }
+        }
+      }
+    }, {threshold: [0]});
+
+    $('material-select')
+      .each((index, element) => {
+        observer.observe(element);
+      });
   }
 
   tableColumns(): JSX.Element[] {
@@ -240,7 +259,8 @@ export class RecordsPage extends Page {
                                   id: field.id ?? fieldIndex,
                                   name: field.name ?? field.id ?? fieldIndex,
                                   'data-default-value':
-                                    field.value ?? (field as SelectT).selected ?? ''
+                                    field.value ?? (field as SelectT).selected ?? '',
+                                  fixedMenuPosition: field.type === 'select'
                                 }
                               )}
                             </mwc-layout-grid-cell>