diff --git a/docs/dev_notes.md b/docs/dev_notes.md
index 3f2113da6..b1a9984a6 100644
--- a/docs/dev_notes.md
+++ b/docs/dev_notes.md
@@ -18,11 +18,10 @@
 - [ ] pre-configured ban/warn reasons with new perm to lock admins to only use them?
     - [ ] apply new ban scheme to the web player modal
     - [ ] apply new ban scheme to the NUI
-    - [ ] maybe this should be named Ban Templates?
-    - [ ] checklist:
-        - [ ] light mode
-        - [ ] multiline
-        - [ ] mobile
+    - [x] checklist:
+        - [x] light mode
+        - [x] multiline
+        - [x] mobile
 - [ ] NEW PAGE: Dashboard
     - [ ] new performance chart
     - [ ] number callouts from legacy players page
@@ -64,6 +63,13 @@ break down the discord /info command in /info and /admininfo?
 
 https://observablehq.com/@d3/zoomable-area-chart?collection=@d3/d3-zoom
 
+player/history modal is cutting bottom of title (test with jgpq, etc)
+
+new apis? useBackendQuery & useBackendMutation
+based on swr's methods
+the auth part can be the same middleware for both
+need to check swr's behavior on unmount nad how to change timeouts
+
 
 # @formkit/auto-animate
 > 2.9kb
@@ -724,6 +730,8 @@ https://freesound.org/browse/tags/laser/?page=5#sound
 > A slider with 500 steps, and an array with 500 timestamps
 > this array can be done by dividing the serverLog.length to get the step, then a for loop to get the timestamps
 
+> may 2024: use https://observablehq.com/@d3/d3-bisect
+
 
 ### New database alternatives:
 > check the chat saved messages on that chat
diff --git a/panel/src/components/dndSortable.tsx b/panel/src/components/dndSortable.tsx
index 09e0d62cf..03cad1615 100644
--- a/panel/src/components/dndSortable.tsx
+++ b/panel/src/components/dndSortable.tsx
@@ -37,7 +37,10 @@ export function DndSortableItem({ id, disabled, className, children }: DndSortab
 
     attributes.role = 'listitem'; //Override role due to having a drag handle
     const style: React.CSSProperties = {
-        transform: CSS.Transform.toString(transform),
+        transform: CSS.Transform.toString(transform && {
+            ...transform,
+            scaleY: 1, //prevent default squishing behavior for multiline items
+        }),
         transition,
     };
 
@@ -45,7 +48,7 @@ export function DndSortableItem({ id, disabled, className, children }: DndSortab
         <li
             ref={setNodeRef} style={style} {...attributes}
             className={cn(
-                "bg-card rounded-lg border px-2 py-3 flex gap-3 relative aria-pressed:z-50 aria-pressed:opacity-85",
+                "bg-card rounded-lg border px-2 py-3 flex gap-3 relative aria-pressed:z-50 aria-pressed:opacity-85 aria-pressed:shadow-xl",
                 className
             )}
         >
@@ -53,7 +56,7 @@ export function DndSortableItem({ id, disabled, className, children }: DndSortab
                 {...listeners}
                 title="Drag to reorder"
                 className={cn(
-                    "text-muted-foreground",
+                    "text-muted-foreground my-auto",
                     disabled
                         ? "cursor-not-allowed opacity-50"
                         : "cursor-grab hover:text-primary hover:scale-110"
diff --git a/panel/src/pages/BanTemplates/BanTemplatesListItem.tsx b/panel/src/pages/BanTemplates/BanTemplatesListItem.tsx
index 07531b9e3..a7a6d13bc 100644
--- a/panel/src/pages/BanTemplates/BanTemplatesListItem.tsx
+++ b/panel/src/pages/BanTemplates/BanTemplatesListItem.tsx
@@ -14,13 +14,15 @@ type BanTemplatesListItemProps = {
 
 export default function BanTemplatesListItem({ id, reason, duration, onEdit, onRemove, disabled }: BanTemplatesListItemProps) {
     return (<>
-        <div className="grow flex items-center justify-items-start gap-2">
-            <span className="line-clamp-1">
+        <div className="grow sm:flex items-center justify-items-start gap-2">
+            <span className="line-clamp-5 md:line-clamp-3">
                 {reason}
             </span>
             <div className={cn(
-                "bg-black/50 opacity-75 px-2 py-0.5 text-sm rounded shrink-0 uppercase",
-                duration === 'permanent' ? 'text-red-500' : 'text-primary'
+                "bg-black/5 dark:bg-black/40 px-2 py-0.5 my-1 sm:my-0 border text-sm rounded w-max shrink-0 uppercase select-none",
+                duration === 'permanent'
+                    ? 'border-destructive bg-destructive-hint text-destructive'
+                    : 'border-primary text-primary opacity-85'
             )}>
                 {banDurationToString(duration)}
             </div>
diff --git a/panel/src/pages/BanTemplates/BanTemplatesPage.tsx b/panel/src/pages/BanTemplates/BanTemplatesPage.tsx
index cdc77fd70..bda9b91e0 100644
--- a/panel/src/pages/BanTemplates/BanTemplatesPage.tsx
+++ b/panel/src/pages/BanTemplates/BanTemplatesPage.tsx
@@ -185,7 +185,7 @@ export default function BanTemplatesPage() {
     //Rendering
     const canEdit = hasPerm('settings.write');
     return <>
-        <div className="space-y-4 w-fullx w-[1000px] DEBUG mx-auto">
+        <div className="space-y-4 w-full max-w-screen-lg mx-auto">
             <div className="px-2 md:px-0">
                 <h1 className="text-3xl mb-2">Ban Templates</h1>
                 <p>