Repository: hydroshare/hydroshare

Issue:
responsive display issue with left margins on hs-tools icon
**Description of the bug**
Left margins are negative and the icon preview for hs-tools hangs off the left side of the screen.
While resolving #4474 in PR #4479, I accidentally introduced this problem

![image](https://user-images.githubusercontent.com/17934193/154289326-fdc609f3-e1f1-45cb-960a-fdc16582c5cc.png)

Steps to reproduce the bug:
1. Edit a web-app resource
2. Reduce your browser window so that it is "small" (by bootstrap standards)
2. Scroll down to the "Icon URL or File"
3. You will see that the "preview" hangs off the left side

**Expected behavior**
Preview for icon should be fully visible

**Additional information**
Add any other context about the problem here such as screenshots, software versions, and browser information.

responsive display issue with left margins on hs-tools icon
**Description of the bug**
Left margins are negative and the icon preview for hs-tools hangs off the left side of the screen.
While resolving #4474 in PR #4479, I accidentally introduced this problem

![image](https://user-images.githubusercontent.com/17934193/154289326-fdc609f3-e1f1-45cb-960a-fdc16582c5cc.png)

Steps to reproduce the bug:
1. Edit a web-app resource
2. Reduce your browser window so that it is "small" (by bootstrap standards)
2. Scroll down to the "Icon URL or File"
3. You will see that the "preview" hangs off the left side

**Expected behavior**
Preview for icon should be fully visible

**Additional information**
Add any other context about the problem here such as screenshots, software versions, and browser information.



Discussion:

Resolving patch:
diff --git a/hs_tools_resource/forms.py b/hs_tools_resource/forms.py
--- a/hs_tools_resource/forms.py
+++ b/hs_tools_resource/forms.py
@@ -481,22 +481,23 @@ def __init__(self, allow_edit=True, res_short_id=None,
                         </a>
                         """),
                     HTML("""
-                    <a type="button" id="icon-delete-btn" class="" title="Clear icon">
-                        <span class="glyphicon glyphicon-trash icon-button btn-remove"></span>
-                    </a>
-                    """),
-                    css_class='form-group col-md-6 mb-0'
+                        <a type="button" id="icon-delete-btn" class="" title="Clear icon">
+                            <span class="glyphicon glyphicon-trash icon-button btn-remove"></span>
+                        </a>
+                        """),
+                    css_class='form-group col-sm-6'
                 ),
-                css_class='form-row'
             ),
             Row(
-                HTML("""
-                    <span id="icon-preview-label" class="control-label">Preview</span>
-                    <br>
-                    <img id="tool-icon-preview" src="{data_url_db}">
-                    """.format(data_url_db=data_url_db)),
-                css_class='form-row'
+                Column(
+                    HTML("""
+                        <span id="icon-preview-label" class="control-label">Preview</span>
+                        <br>
+                        <img id="tool-icon-preview" src="{data_url_db}">
+                        """.format(data_url_db=data_url_db)),
+                    css_class='form-group col-sm-12'
                 ),
+            )
         )
         kwargs['element_name_label'] = 'Icon URL or File'
         super(ToolIconFormHelper, self).__init__(allow_edit,
diff --git a/hs_tools_resource/models.py b/hs_tools_resource/models.py
--- a/hs_tools_resource/models.py
+++ b/hs_tools_resource/models.py
@@ -487,7 +487,7 @@ def _validate_tool_icon(cls, url):
     def create(cls, **kwargs):
         if "value" in kwargs:
             url = kwargs["value"]
-
+            data_url = cls._validate_tool_icon(url) if url else ""
             metadata_obj = kwargs['content_object']
             new_meta_instance = ToolIcon.objects.create(content_object=metadata_obj)
             new_meta_instance.value = url


Test patch: