temp

src/components/sidebarRight/tabs/editGroup.ts

@@ -1,6 +1,7 @@
 import { SliderSuperTab } from "../../slider"
 import InputField from "../../inputField";
 import EditPeer from "../../editPeer";
+import { SettingSection } from "../../sidebarLeft";
 
 export default class AppEditGroupTab extends SliderSuperTab {
   private groupNameInputField: InputField;
@@ -11,35 +12,50 @@ export default class AppEditGroupTab extends SliderSuperTab {
     this.container.classList.add('edit-peer-container', 'edit-group-container');
     this.title.innerHTML = 'Edit';
 
-    const inputFields: InputField[] = [];
-
     {
+      const section = new SettingSection({noDelimiter: true});
+      const inputFields: InputField[] = [];
+
       const inputWrapper = document.createElement('div');
       inputWrapper.classList.add('input-wrapper');
   
       this.groupNameInputField = new InputField({
         label: 'Group Name',
         name: 'group-name',
-        maxLength: 70
+        maxLength: 255
       });
       this.descriptionInputField = new InputField({
         label: 'Description',
         name: 'group-description',
-        maxLength: 64
+        maxLength: 255
       });
   
       inputWrapper.append(this.groupNameInputField.container, this.descriptionInputField.container);
       
       inputFields.push(this.groupNameInputField, this.descriptionInputField);
-      this.scrollable.append(inputWrapper);
+
+      this.editPeer = new EditPeer({
+        peerId: -1408712018,
+        inputFields,
+        listenerSetter: this.listenerSetter
+      });
+      this.content.append(this.editPeer.nextBtn);
+
+      section.content.append(this.editPeer.avatarEdit.container, inputWrapper);
+
+      this.scrollable.append(section.container);
+    }
+
+    {
+      const section = new SettingSection({
+
+      });
     }
 
-    this.editPeer = new EditPeer({
+    {
-      peerId: -1408712018,
+      const section = new SettingSection({
-      inputFields,
+        
-      listenerSetter: this.listenerSetter
+      });
-    });
+    }
-    this.content.append(this.editPeer.nextBtn);
-    this.scrollable.prepend(this.editPeer.avatarEdit.container);
   }
 }

src/scss/partials/_rightSidebar.scss

@@ -74,6 +74,11 @@
       display: flex;
     }
   }
+
+  .input-wrapper {
+    width: 100%;
+    max-width: 100%;
+  }
 }
 
 .profile {