[WEB-2173] fix: app sidebar spacing and build error (#5300)

* fix: app sidebar spacing

* fix: build error

admin/app/general/form.tsx

@@ -9,9 +9,9 @@ import { IInstance, IInstanceAdmin } from "@plane/types";
 import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common";
+import { useInstance } from "@/hooks/store";
 import { IntercomConfig } from "./intercom";
 // hooks
-import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
   instance: IInstance;

admin/app/general/intercom.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { FC, FormEvent, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { MessageSquare } from "lucide-react";
 import useSWR from "swr";
+import { MessageSquare } from "lucide-react";
 import { IFormattedInstanceConfiguration } from "@plane/types";
-import { Button, Input, ToggleSwitch } from "@plane/ui";
+import { ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -16,7 +16,7 @@ type TIntercomConfig = {
 export const IntercomConfig: FC<TIntercomConfig> = observer((props) => {
   const { isTelemetryEnabled } = props;
   // hooks
-  const { instanceConfigurations, instance, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
+  const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 

web/app/[workspaceSlug]/(projects)/sidebar.tsx

@@ -53,21 +53,23 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
     >
       <div
         ref={ref}
-        className={cn("size-full flex flex-col flex-1 p-4 pb-0", {
+        className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
           "p-2": sidebarCollapsed,
         })}
       >
+        <div className="px-4">
           <SidebarDropdown />
           <div className="flex-shrink-0 h-4" />
           <SidebarAppSwitcher />
           <SidebarQuickActions />
+        </div>
         <hr
           className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
             "opacity-0": !sidebarCollapsed,
           })}
         />
         <div
-          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2.5", {
+          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-4", {
             "vertical-scrollbar": !sidebarCollapsed,
           })}
         >

web/core/components/workspace/sidebar/favorites/favorite-folder.tsx

@@ -306,7 +306,12 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                 leaveFrom="transform scale-100 opacity-100"
                 leaveTo="transform scale-95 opacity-0"
               >
-                <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1 px-2">
+                <Disclosure.Panel
+                  as="div"
+                  className={cn("flex flex-col gap-0.5 mt-1", {
+                    "px-2": !isSidebarCollapsed,
+                  })}
+                >
                   {favorite.children.map((child) => (
                     <FavoriteItem
                       key={child.id}