Fix filter field

src/components/Points/PointsFilter/PayloadFilterField.jsx

@@ -139,7 +139,8 @@ const PayloadFilterField = memo(function PayloadFilterField({
     (code) => {
       if (!code) return '';
 
-      const regex = /([a-zA-Z_][\w.]*):(\S*)/g;
+      // Negative lookahead (?!//) prevents matching URL schemes like https://
+      const regex = /([a-zA-Z_][\w.]*):(?!\/\/)(\S*)/g;
       const keyColor = theme.palette.text.primary;
       const valueColor = theme.palette.primary.main;
       const valueBgColor = alpha(theme.palette.primary.light, 0.15);
@@ -156,9 +157,9 @@ const PayloadFilterField = memo(function PayloadFilterField({
         const currentValueBgColor = isIdFilter ? idValueBgColor : valueBgColor;
 
         const valueSpan = value
-          ? `<span style="color:${currentValueColor};background:${currentValueBgColor};border-radius:2px;padding:0;margin:0;display:inline-block">${value}</span>`
+          ? `<span style="color:${currentValueColor};background:${currentValueBgColor};border-radius:2px">${value}</span>`
           : '';
-        return `<span style="color:${currentKeyColor};font-weight:500">${key}:</span>${valueSpan}`;
+        return `<span style="color:${currentKeyColor}">${key}:</span>${valueSpan}`;
       });
     },
     [theme]

src/components/Points/PointsFilter/StyledPointsFilter.js

@@ -1,6 +1,7 @@
 import { styled } from '@mui/material/styles';
 import { Box, IconButton, Paper, Popper } from '@mui/material';
 import Editor from 'react-simple-code-editor';
+import { filterInputFontFamily } from './helpers';
 
 export const StyledAutocompletePopper = styled(Popper)(() => ({
   width: 'fit-content !important',
@@ -53,26 +54,37 @@ export const ClearButton = styled(IconButton)(({ theme }) => ({
   },
 }));
 
-export const StyledFilterEditor = styled(Editor)(({ theme }) => ({
-  flex: 1,
-  fontFamily: theme.typography.fontFamily,
-  fontSize: '1rem',
+export const getFilterInputFontSx = (theme) => ({
+  fontFamily: filterInputFontFamily,
+  fontSize: theme.typography.body1.fontSize,
   fontWeight: 400,
   lineHeight: '23px',
-  letterSpacing: '0.5px',
+  letterSpacing: 'normal',
+  fontFeatureSettings: 'normal',
+  fontVariantLigatures: 'none',
+});
+
+export const StyledFilterEditor = styled(Editor)(({ theme }) => ({
+  flex: 1,
+  // Monospace avoids cumulative cursor drift from variable/proportional fonts in textarea vs pre
+  ...getFilterInputFontSx(theme),
   '& textarea, & pre': {
     fontFamily: 'inherit !important',
     fontSize: 'inherit !important',
     fontWeight: 'inherit !important',
     lineHeight: 'inherit !important',
     letterSpacing: 'inherit !important',
+    fontFeatureSettings: 'inherit !important',
+    fontVariantLigatures: 'inherit !important',
     margin: '0 !important',
     padding: '0 !important',
     border: 'none !important',
     outline: 'none !important',
     background: 'transparent !important',
     whiteSpace: 'pre-wrap !important',
-    wordBreak: 'break-word !important',
+    // Match react-simple-code-editor defaults for consistent wrapping
+    wordBreak: 'keep-all !important',
+    overflowWrap: 'break-word !important',
     wordSpacing: 'normal !important',
     '&::placeholder': {
       color: theme.palette.text.disabled,
@@ -105,24 +117,37 @@ export const AutocompleteList = styled(Paper)(({ theme }) => ({
   },
 }));
 
-export const getSharedTextFieldSx = (theme) => ({
-  '& .MuiOutlinedInput-root': {
-    borderRadius: '8px',
-    padding: '6px 8px',
-    minHeight: 40,
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    borderColor: theme.palette.divider,
-  },
-  '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
-    borderColor: theme.palette.primary.main,
-  },
-  '& .MuiChip-root': {
-    height: 28,
-    borderRadius: '8px',
-  },
-  '& .MuiOutlinedInput-input::placeholder': {
-    color: theme.palette.text.disabled,
-    opacity: 1,
-  },
-});
+export const getSharedTextFieldSx = (theme) => {
+  const fontSx = getFilterInputFontSx(theme);
+
+  return {
+    '& .MuiOutlinedInput-root': {
+      ...fontSx,
+      borderRadius: '8px',
+      padding: '6px 8px',
+      minHeight: 40,
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: theme.palette.divider,
+    },
+    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
+      borderColor: theme.palette.primary.main,
+    },
+    '& .MuiOutlinedInput-input, & .MuiInputBase-input': {
+      ...fontSx,
+    },
+    '& .MuiChip-root': {
+      ...fontSx,
+      height: 28,
+      borderRadius: '8px',
+    },
+    '& .MuiChip-label': {
+      ...fontSx,
+    },
+    '& .MuiOutlinedInput-input::placeholder': {
+      color: theme.palette.text.disabled,
+      opacity: 1,
+      ...fontSx,
+    },
+  };
+};

src/components/Points/PointsFilter/helpers.js

@@ -1,3 +1,8 @@
+/**
+ * Shared monospace font stack for filter and similar-search inputs
+ */
+export const filterInputFontFamily = 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace';
+
 /**
  * Check if two filters are equal
  * @param {Object} a - First filter
@@ -198,7 +203,7 @@ export const calculatePopperOffset = (filterInputValue, currentWordStart) => {
     measureCanvas = document.createElement('canvas');
     measureCtx = measureCanvas.getContext('2d');
     // Match the editor's font
-    measureCtx.font = '1rem system-ui, -apple-system, sans-serif';
+    measureCtx.font = `400 16px ${filterInputFontFamily}`;
   }
 
   const textWidth = measureCtx.measureText(textBeforeWord).width;