this is my base_site.html
{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static from staticfiles %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
{% endblock %}
{% block extrastyle %}
{{ block.super }}
{# Custom CSS for the admin panel #}
<link href="{% static 'css/octopus-admin.css' %}" rel="stylesheet" type="text/css" />
{% if LANGUAGE_BIDI %}
<link href="{% static 'css/admin-rtl.css' %}" rel="stylesheet" type="text/css" />
{% endif %}
<style>
.user-tools-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
.user-tools {
margin-left: 20px;
}
.language-form {
display: inline-block;
margin-left: 10px;
}
.language-select {
padding: 2px 5px;
font-size: 12px;
}
</style>
{% endblock %}
{% block userlinks %}
<div class="user-tools-container">
{{ block.super }}
<form class="language-form" id="languageForm" method="post" action="{% url 'set_language' %}">
{% csrf_token %}
<select class="language-select" name="language" id="language" onchange="changeLanguage(this.value)">
{% for lang_code, lang_name in LANGUAGES %}
{% if lang_code == LANGUAGE_CODE %}
<option value="{{ lang_code }}" selected>{{ lang_name }}</option>
{% else %}
<option value="{{ lang_code }}">{{ lang_name }}</option>
{% endif %}
{% endfor %}
</select>
</form>
</div>
<script>
function changeLanguage(languageCode) {
const form = document.getElementById('languageForm');
form.elements.language.value = languageCode;
form.submit();
}
</script>
{% endblock %}
the problem is it look like this:
as you see everything on the right side are so compact and i can’t put some space between them!
is there anyway to make it better in term of spacing?