responsive community header

lib/pages/common/buttons/default_button.dart

@@ -70,14 +70,14 @@ class DefaultButton extends StatelessWidget {
                     borderRadius: BorderRadius.circular(borderRadius ?? 20),
                   ),
                 ),
-                fixedSize: WidgetStateProperty.all(
+                fixedSize: height != null
-                  const Size.fromHeight(50),
+                ? WidgetStateProperty.all(Size.fromHeight(height!))
-                ),
+                : null, 
                 padding: WidgetStateProperty.all(
                   EdgeInsets.all(padding ?? 10),
                 ),
                 minimumSize: WidgetStateProperty.all(
-                  const Size.fromHeight(50),
+                  const Size.fromHeight(10),
                 ),
                 elevation: WidgetStateProperty.all(elevation ?? 0),
               ),

lib/pages/spaces_management/widgets/community_stricture_header_widget.dart

@@ -29,9 +29,10 @@ class CommunityStructureHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
+    final screenWidth = MediaQuery.of(context).size.width;
 
     return Container(
-      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
       decoration: BoxDecoration(
         color: ColorsManager.whiteColors,
         boxShadow: [
@@ -42,17 +43,24 @@ class CommunityStructureHeader extends StatelessWidget {
           ),
         ],
       ),
-      child: Row(
+      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          _buildCommunityInfo(theme),
+          Row(
-          _buildActionButtons(),
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: _buildCommunityInfo(theme, screenWidth),
+              ),
+              const SizedBox(width: 16),
+            ],
+          ),
         ],
       ),
     );
   }
 
-  Widget _buildCommunityInfo(ThemeData theme) {
+  Widget _buildCommunityInfo(ThemeData theme, double screenWidth) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -60,22 +68,63 @@ class CommunityStructureHeader extends StatelessWidget {
           'Community Structure',
           style: theme.textTheme.headlineLarge?.copyWith(color: ColorsManager.blackColor),
         ),
-        if (communityName != null) _buildCommunityName(),
+        if (communityName != null)
+          Row(
+            children: [
+              if (!isEditingName)
+                Flexible(
+                  child: Text(
+                    communityName!,
+                    style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                  ),
+                ),
+              if (isEditingName)
+                SizedBox(
+                  width: screenWidth * 0.3,
+                  child: TextField(
+                    controller: nameController,
+                    decoration: const InputDecoration(
+                      border: InputBorder.none,
+                      isDense: true,
+                    ),
+                    style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor),
+                    onSubmitted: onNameSubmitted,
+                  ),
+                ),
+              const SizedBox(width: 8),
+              GestureDetector(
+                onTap: onEditName,
+                child: SvgPicture.asset(
+                  Assets.iconEdit,
+                  width: 16,
+                  height: 16,
+                ),
+              ),
+              const Spacer(flex: 3), // Pushes the Save button to the right
+              if (isSave) _buildActionButtons(),
+            ],
+          ),
       ],
     );
   }
 
-  Widget _buildCommunityName() {
+  Widget _buildCommunityName(double screenWidth) {
     return Row(
       children: [
         if (!isEditingName)
-          Text(
+          Flexible(
-            communityName!,
+            child: Text(
-            style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor),
+              communityName!,
+              style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor),
+              overflow: TextOverflow.ellipsis,
+              maxLines: 1,
+            ),
           ),
         if (isEditingName)
           SizedBox(
-            width: 200,
+            width: screenWidth * 0.3,
             child: TextField(
               controller: nameController,
               decoration: const InputDecoration(
@@ -100,28 +149,15 @@ class CommunityStructureHeader extends StatelessWidget {
   }
 
   Widget _buildActionButtons() {
-    return Row(
+    return Wrap(
+      alignment: WrapAlignment.end,
+      spacing: 10,
       children: [
-        if (isSave)
+        _buildButton(
-          _buildButton(
+          label: "Save",
-            label: "Save",
+          icon: const Icon(Icons.save, size: 18, color: ColorsManager.spaceColor),
-            icon: const Icon(Icons.save, size: 18, color: ColorsManager.spaceColor),
+          onPressed: onSave,
-            onPressed: onSave,
+        ),
-          ),
-        if (isSave) const SizedBox(width: 10),
-        /*  
-   Commenting till finalize delete
-     if (communityName != null && communityName != '')
-          _buildButton(
-            label: "Delete",
-            icon: SvgPicture.asset(
-              Assets.delete,
-              width: 18,
-              height: 18,
-            ),
-            onPressed: onDelete,
-          ),
-          */
       ],
     );
   }
@@ -131,26 +167,36 @@ class CommunityStructureHeader extends StatelessWidget {
     required Widget icon,
     required VoidCallback onPressed,
   }) {
-    return SizedBox(
+    final double buttonHeight = 30;
-      width: 100,
+    return ConstrainedBox(
-      height: 30,
+      constraints: BoxConstraints(maxWidth: 80, minHeight: buttonHeight),
       child: DefaultButton(
         onPressed: onPressed,
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            icon,
-            const SizedBox(width: 8),
-            Text(label),
-          ],
-        ),
         backgroundColor: ColorsManager.textFieldGreyColor,
         foregroundColor: ColorsManager.blackColor,
         borderRadius: 8.0,
         padding: 2.0,
+        height: buttonHeight,
         elevation: 0,
         borderColor: Colors.grey.shade300,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            icon,
+            const SizedBox(width: 5),
+            Flexible(
+              child: Text(
+                label,
+                style: const TextStyle(fontSize: 13),
+                overflow: TextOverflow.ellipsis,
+                maxLines: 1,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
+
+
 }