[fix] some CSS bugs

Author: TechQuery

registry/new-york/blocks/editor/tool.tsx

@@ -19,7 +19,7 @@ export function renderTool(this: Tool, editor: RefObject<HTMLElement>) {
       title={title}
       variant={active ? "default" : "outline"}
       size="icon-sm"
-      className="mr-2 mb-2"
+      className="mr-2 mb-2 p-2"
       disabled={!usable}
       onClick={(event) => {
         event.preventDefault();

registry/new-york/blocks/editor/tools/color.tsx

@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/button";
 
 export interface ColorSelectorProps
   extends Partial<Record<"className" | "title" | "value", string>> {
-  icon: "file-earmark-font" | "file-earmark-font-fill";
+  icon: "Type" | "FileText";
   type: ColorName;
   onChange?: (color: string) => any;
 }
@@ -38,6 +38,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
       type="button"
       variant="outline"
       size="icon-sm"
+      className="p-2"
       style={{
         color: type === "color" ? value : undefined,
         backgroundColor: type === "color" ? undefined : value,
@@ -52,10 +53,16 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
         input.click();
       }}
     >
-      {icon === "file-earmark-font" ? (
-        <Type className="size-4" />
+      {icon === "Type" ? (
+        <Type
+          className="size-4"
+          style={type !== "color" ? { filter: "invert(1)" } : undefined}
+        />
       ) : (
-        <FileText className="size-4" />
+        <FileText
+          className="size-4"
+          style={type !== "color" ? { filter: "invert(1)" } : undefined}
+        />
       )}
     </Button>
   </span>
@@ -83,11 +90,11 @@ export function renderColorTool(
 }
 
 export class ForeColorTool extends FCT {
-  icon = "file-earmark-font";
+  icon = "Type";
   render = renderColorTool;
 }
 
 export class BackColorTool extends BCT {
-  icon = "file-earmark-font-fill";
+  icon = "FileText";
   render = renderColorTool;
 }

registry/new-york/blocks/rest-table/example.tsx

@@ -9,7 +9,7 @@ import { RestTable } from "./rest-table";
 configure({ enforceActions: "never" });
 
 export const RestTableExample = () => (
-  <div className="w-full h-screen">
+  <div className="w-full">
     <RestTable
       className="text-center"
       editable

registry/new-york/blocks/rest-table/rest-table.tsx

@@ -366,7 +366,7 @@ export class RestTable<
 
     return (
       <div className={className} {...props}>
-        <header className="sticky top-0 bg-background py-3 flex flex-wrap gap-3 justify-between items-center border-b">
+        <header className="sticky top-0 z-1 bg-background/80 backdrop-blur py-3 flex flex-wrap gap-3 justify-between items-center border-b">
           {filterFields && (
             <RestForm
               className="flex flex-wrap items-center gap-3 pb-3 m-0 border-b"